05. Site sections

This next step is going to make quite a visual difference to our web page. Essentially what we’re going to do is change the background colors of all the sections of our page. This will clearly show us where each of them are as we start shuffling them around.

Looking back at our plan, you can see there are six separate sections to our page. And if you look at the source code of our “index.html” file you can probably find the names of the sections we need to change:

  1. site-header (this is a class within our “header” tag)
  2. nav
  3. section
  4. page-header (this is a different class within another “header” tag)
  5. article
  6. footer

Those six items need to have rules made so that we can see them all clearly on our page. I’m sure you could do the ones for “nav“, “section“, “article” and “footer” without any problem, but what about our two instances of “header“?

Class selectors
The problem with our “header” tag is that we want the same tag to look different in the two places we’ve used it. This is why in our html we had something like:

 <header class="some_class_name">...

Having given our header tag a class, we can create a rule for a class exactly like we would have done for a tag, so if I want my “page-header” class to have a specific background colour I just write:

.page-header {
   background-color : #f2f5a9;
}

The important thing to note here is the use of a period before the class name, that’s all that differentiates a class selector from a regular one. Classes can be very useful for all sorts of things and here you’ve seen the first and most important one, differentiating similar tags.

So with this information, go ahead and change the background colour of the six different sections of your site. If you’ve done it successfully it should look something like this:

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>