Selectors in action - step by step tutorial

Step 17 - styling the <h2> element

To style the <h2> specifically, a descendant selector is used. It sets the size, weight, color, padding and margin as well as border-bottom.

Up till now, the <h2> element has had a margin on top of the element, which has been creating a gap between the the header container and the left and right containers. Now that the margin has been removed from the <h2> element (using "margin: 0"), this gap disappears.

div#content h2
{
font-size: 2em;
color: #036;
margin: 0;
padding-top: 1em;
font-weight: normal;
}

View step 17 »

Go to Step 18 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org