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

CSS How to Make a Website Customizing Colors and Fonts Use Color in CSS

Michael Velasquez
Michael Velasquez
1,868 Points
Posted by Michael Velasquez
Michael Velasquez
1,868 Points

Header question at 4:40

At 4:40 in the video, he talks about making the header green. He add's this code to his css:

header { background: #6ab47b; border-color: #599a68; }

When checking the site, the header background is green as expected within a ribbon looking shape. But i have two questions:

1) How does the header know to stretch the full width of the page? It's outside of #wrapper and anything else that would give it's background a width of 100% (from what i can tell). The same questions goes for the height of the header. How does the header background know how tall it should be? What code justified the green background to start and end at that particular height?

2) Why is header not considered an id? (aka, #header)

Sorry for the newb questions. I'm sure the answers are staring at me in the face but i just can't see it.

2 Answers

Coco Jackowski
Coco Jackowski
12,914 Points
Coco Jackowski
Coco Jackowski
12,914 Points

I don't know what video you're refering to, but I still might be able to help.

The <header> element is a block level element which, by default, takes up the full width of its parent element (in your case, I think, the <body> element). If the parent element takes up the entire width of the viewport, so will the header. As for its height, does your header contain an <h1> element? If so, these come with their own default margins and paddings, which give the element its sense of height.

You can just create a <div> and give it an id of header if you like, but using the header element makes your document more semantic, which has a host of benefits, including greater parseability by search engines and screen readers.

Coco Jackowski
Coco Jackowski
12,914 Points
Coco Jackowski
Coco Jackowski
12,914 Points

Ah, now I see the video you mentioned. Excuse me, I'm new to these forums :D

Dillon Patel
Dillon Patel
4,025 Points
Dillon Patel
Dillon Patel
4,025 Points

1) Headers, sections, footers are all just containers to organize your code. The elements within, such as paragraphs, images, etc., determine what amount of the viewport each takes up depending on certain properties (such as display, width, height, etc.).

2) The header is not considered an ID as ID's must be created as an attribute in your markup (HTML file). For example, if your markup had <header id="header"></header>. In your CSS file, it would be appropriate to select the ID like so: #header { }

I hope my answer made sense. Let me know if you have any more questions!