4.4: Parent-child styles

If you’ve followed the instructions so far, your index.html page should look something like this.

In Chapter 3, we styled our basic paragraphs, headings and links. Often we will want different styles for our header, aside (sidebar) and footer.

Let’s begin by putting some real content in our header:

Several things happened, some of them not what we want. For example, the header box might have grown larger because of the margin properties of your heading. To create a special h1 heading, we will use the parent-child CSS selector:

Note that the font-size of 30pt is pretty big, and that everything else is set to add no extra space. Line-height matches the font-size, and the margin property is set to 0. The color also has changed, to a shade of red.

In this specification, header is the parent and h1 is the child. This specification affects only h1 headings within the <header></header> tags.

Now we will do the same for the footer.

Now let’s style this up. Again, we will use the parent-child selector:

The standard navigation set

Your blank stylesheet has a horizontal menu with rollover all set up. To activate it:

  • Now open your style.css page with your text editor.
    • Find the specifications for the menu class selector.
    • Experiment with colors. You can change the normal colors and the a:hover colors to create a pleasing effect.