Web Design with HTML and CSS

140

Working with a CSS reset file

Web Design with HTML and CSS Digital Classroom

Working with a CSS reset fi le

Before you start building your page layout, you will learn to use a CSS reset fi le. In Lesson 4,

you learned that virtually all HTML elements (such as paragraphs and headings) have default

styles rendered by the browser. For example, the heading 1 default style has top and bottom

margins of 10 pixels. If you want to style a heading so there is no margin, you must explicitly

set the style rules to zero.

On the left is a heading 1 with default margins of 10 pixels. On the right is a heading 1 with the margins set to zero.

The CSS rule for setting the margins to zero is as follows:

h1{

margin-top:0px;

margin-bottom:0px;

}

All HTML elements have default margins; unfortunately, web browsers use their own rules

for rendering content, and interpret the appearance of these margins diff erently. For example,

the 10-pixel margin in browser A might be rendered as 15 pixels in browser B. These

diff erences can introduce inconsistencies in your page layouts. Fortunately, you can use the

CSS reset fi le to remove the default styles from the most commonly used HTML elements.

With the CSS styles reset, you have a reliable and consistent foundation on which to base

your new styles. To get a better sense of how styles work, open a page that contains a number

of default styles and link the CSS reset style sheet to this page.

1 In your text editor, choose File > Open. In the dialog box that appears, navigate to the

web07lessons folder, choose the 07_reset.html fi le, and click Open.

This fi le has a number of generic HTML elements, such as headings, paragraphs, lists, and

forms; it has no CSS styles.

2 Preview the page in your web browser and notice the space between the headings as well

as the appearance of the lists and the form. Add a link to your CSS reset style sheet to see

how this aff ects the appearance of these elements. Close your web browser and return to

your text editor.