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 CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

Posted by vamosrope14
vamosrope14
14,932 Points

Couldn't we use the text-align property for the contents of the header instead?

.

3 Answers

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

You can, but it's not efficient and makes it harder on yourself to do some things. For everything you want to do to those elements, that are at the top of the page, you will have to write at least twice. You use the header tag to group them together to reduce that.

.name {
    text-align: center;
    background: blue;
}

.main-nav{
    text-align: center;
    background: blue;
}

Or even

.name, .main-nav {
    text-align: center;
    background: blue;
}

You could do

.main-header{
    text-align: center;
    background: blue;
}

It's cleaner and easier to manage. You can easily add more to the header and have it all still have the same base styles applied to it without making yourself have to do more work and it is grouped together. It's the same thought to divs, and sections as well. I would recommend trying to make different kinds of changes to each element in the header, then adding the header tags around them and trying the same changes to see the differences.

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

The header is more of just a section, kind of like the body or main tags. To group the intro section of your page together in the "header". Then even for using text-align you could using it on the header element instead of each separate element in header. Which also reduces the code you need to write and makes it easier to manage and read.

Here is the description of the header from MDN:

The <header> element represents a container for introductory content or a set of navigational links

vamosrope14
vamosrope14
14,932 Points
vamosrope14
vamosrope14
14,932 Points

.