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;
}
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;
}
Other Max Design articles and presentations