Web Design with HTML and CSS

A brief history of layout techniques on the web

Lesson 7, Introduction to CSS Layout 165

You can add a diff erent margin to one of the elements. For example, you might want to
move the paragraphs inside the sidebar to the right so they are indented. In this case, add
another rule specifi cally for the p elements in the sidebar, as indicated in the next step.
Close your browser and return to your text editor.

10 Add a new rule immediately below your previous rule set for the sidebar paragraph,

#sidebar p, #sidebar h2, #sidebar h3, #sidebar h4 #main p, #main h1,

#main h2, #main h3{

margin-left:20px;

margin-right:20px;

}

#sidebar p {

margin-left:30px;

}

This rule overrides the rule you set in step 9. Save the page and preview it in your
browser. The paragraphs in the sidebar now have a left margin of 30 pixels, and in
contrast to the other elements, are now indented.

The paragraphs in the sidebar have specifi c rules for a left margin of 30 pixels.

With the exceptions of the changes you made in this exercise, all the margins and
padding for the elements on your page are set to zero based on the reset style sheet. Add
new values to the top and bottom margin values for most of your elements as indicated
in the next step.

11 Locate the empty p, h1, h2, and h3 rules in your style sheet. Add also the h4 selector to
cover the elements on your page, and modify this rule set as follows (highlighted in red):