Selectors in action - step by step tutorial

Step 6 - styling the heading

6.1 Setting margin and padding

We also need to style the <h1> inside the banner <div>. To do this we will use our first descendant selector - which will select only <h1> elements within a <div> styled with id="banner".

Browsers display headings in slightly different ways - both Opera and Internet Explore do not recognize margin-top correctly. One method to position the heading exactly within the containing div is to set the margin: 0 and use padding to push the heading content into the desired position. Padding can be combined into one shorthand declaration. The rule uses a Descendant selector:

div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
}

6.2 setting weight and size

We can also set the size and weight of the heading using two declarations:

div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}

View step 6 »

Go to Step 7 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org