Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Enrique Villalobos
Enrique Villalobos
1,174 Points

i took the Html coarse but still struggling or misunderstanding a certain part of

<!DOCTYPE html>

<html>

<head> <meta charset="utf-8"> <title> Asterofspace | Html Student</title> <link rel="stylesheet" href="css/AllStyles.css"> </head>

<header> <a href="index.html" id="logo"> <h1> Asterofspace</h1> <h2>Student Work</h2> </a> </header> <nav>

  <ul>
        <li> Hello</li>
        <li> Second</li>
  </ul>

</nav>

<section> <p> Whatever i choose goes here </p> </section>

<footer> <p> © 2015 Asterofspace</p> </footer>

</html>

okay so im making a website or webpage but i cant seem to get the header back-ground color to fill the screen like, im not sure if its the padding or the margin. theres a white gap when i preview the page but ugh im not sure if this will make sense.

Enrique Villalobos
Enrique Villalobos
1,174 Points

my css file isnt on here i dont know how to add it on... :( .

Marcus Parsons
Marcus Parsons
15,719 Points

Hey again Enrique,

The easiest way for me to see your code is to take a snapshot of your workspace. Here's how to do that: http://www.teamtreehouse.com/forum/workspace-snapshots

Enrique Villalobos
Enrique Villalobos
1,174 Points

https://w.trhou.se/hhxb8tf4jp

im not sure if it will show i tried messing with my header colors and they didnt change at all

Enrique Villalobos
Enrique Villalobos
1,174 Points

i attempted to change some of my <p> tags and they arent being updated when i use the preview feature, and i do save my work before doing so. i think something is wrong with my workspace or something help!:((((

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Enrique,

I knew what you were talking about with the gaps, but I wanted to see what you had done already. It's looking good so far. Just try to keep your color values all lowercase like "red" instead of "Red".

You can erase those gaps by using the * selector in your page. The * selector selects every single element on the page so you've got to watch what you set with it. You don't want to be too liberal with using properties inside of the * selector. I used this selector to set all padding and margins on every element to 0 so that everything is flush with the edge of the page. You always put this selector at the very top of the page so that it doesn't overwrite any other properties that might get set.

CSS operates on a cascading nature so that selectors that are further down on the page override any selectors that were set higher up on the page. You'll learn more about this as you go along.

Here is what I did to your CSS file (and I linked the new snapshot below it)

* {
  padding: 0;
  margin: 0;
}

header { 
  background-color: red; 
}

And here is your new snapshot (just hit Fork Workspace): https://w.trhou.se/5jo90tfq7q

Marcus Parsons
Marcus Parsons
15,719 Points

The reason why those gaps exist, by the way, is because each browser sets default browser styles for every page. The reason why they have those margins and padding is so that pages get some room. It's a tradition for browsers to have some margins and padding. These are easily overwritten by the styles we create, though, so it's no problem once you override them.

Enrique Villalobos
Enrique Villalobos
1,174 Points

Wow thanks Marcus!!, that really helps!, hmm so what does * that selector mean?

Marcus Parsons
Marcus Parsons
15,719 Points

The * selector selects literally every single element on the page including the root elements html and body. It is used as a "catch all" to set styles on every single possible element on the page.

Enrique Villalobos
Enrique Villalobos
1,174 Points

ohh i see now, wow your awesome Marcus thanks man!. im having issues with my work space it doesn't update the code ive put in, i'll just log off and log on, if u have any suggestion do please tell :) .

Marcus Parsons
Marcus Parsons
15,719 Points

Haha no problem, Enrique! I would first make sure all of your code correct, changes saved, and then be sure to either refresh the preview page in your browser or close out of the old window and then hit the preview icon in the workspace. If you're not seeing changes, the most likely scenario is that your code is not right. If you can't see your code, you can take a new snapshot and I'll take a look at it. I'm gonna head to bed soon though. It's almost 2:30 am here :\

Enrique Villalobos
Enrique Villalobos
1,174 Points

ohh alright i'll try those things out, alright Later Marcus Thank You for your help!!.

Marcus Parsons
Marcus Parsons
15,719 Points

Let me know tomorrow if you got it fixed or not :)

Enrique Villalobos
Enrique Villalobos
1,174 Points

I will! :))