Web Design with HTML and CSS

164

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

7 Save the fi le and preview it in your browser. Scroll to the footer paragraph and notice

that it no longer has margins. Close your browser and return to your text editor.

This method of styling requires a bit more attention to detail than the padding method.

For example, when new elements are added inside a div, they do not use the same

margins. The next step shows an example of this problem and then the solution, which

involves adding a heading 4 element to the sidebar.

8 In the HTML of your sidebar div after the last paragraph, add the following code:

<h4>Submit a Recipe</h4>

Save the page and preview it in your browser. This heading 4 uses its zero margins

(inherited from the reset.css style sheet) so it is fl ush against the column. Close your

browser and return to your text editor.

9 In your group of rules for the sidebar and main columns, add a new rule (highlighted in

red) in the sidebar for heading 4 (h4):

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

margin-left:20px;

margin-right:20px;

}

Save the page and preview it in your browser. The heading 4 element now has the same

margins as the others.

The heading 4 element now has the same margins as the other elements in the sidebar.