Selectors in action - step by step tutorial

Step 15 - styling the <h3> element

15.1 Margin and padding

To style the <h3> inside the #more <div>, we will use a descendant selector that combines ID and type selectors. We will set the margin-top to "0" to overcome Internet Explorer and Opera's incorrect rendering of top margins.

div#more h3
{
margin-top: 0;
color: #fff;
padding: .2em;
}

15.2 Background

A background image is added to the <h3> element. This image is set to 140px wide and will repeat down the page. No matter how long the <h3> content, the background will always grow under it.

div#more h3
{
margin-top: 0;
color: #fff;
padding: .2em;
background-image: url(more_base.jpg);
background-position: right;
background-repeat: repeat-y;
}

View step 15 »

Go to Step 16 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org