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

why wrap the header?

In the "Best city guide" project, Guil wraps the header and gives it "container" class. Was this necessary or we could have used, as well, " header {} " syntax in CSS? Or, in a more general approach, is it necessary to give header a div? Header by itself is it not a block element, that can be styled with CSS?

3 Answers

I'm no expert by any means, but wouldn't nesting it inside the container div also make the header inherit all the CSS of the container, thus minimizing the amount of CSS you would otherwise have to repeat.

E.g. font-sizes, max-width, margins etc.

HEADER is definitely an element you can style with CSS.

header {
    background: pink;
    color: white;
}

You may want to use the header element in more than one location so targeting a specific header is probably way safer than the above code.

Nesting a header tag inside a particular DIV or assigning a header tag a class or ID are both good strategies to ensure you can easily target just those elements in CSS. :)

Oh and header elements are block level elements by default.

If you have to worry about really old browsers (like IE 8) you can tell them to display header elements as blocks with the following code:

header {
    display: block;
}

Same technique can be used for other modern HTML elements like section, nav, footer, etc...

Thanks for the reply Daniel. In the project I was talking about, the header had also a class, that's why was so confusing for me. I am not even beginner (in process of learning Html and CSS right now, although I don't have enough time to do this properly) so it is important for me to understand these concepts from early on.