A master stylesheet is generally used to clean-up the default browser settings that can cause problems in cross-browser Web design. A master stylesheet in CSS must be the first stylesheet you call in all your documents. Once you’ve cleared out the styles with a master stylesheet, your design starts from the same place in all the browsers.

You also want all your fonts to be displayed consistently in all browsers. Ensure that you use font-family names that are standard on both Macintosh and Windows computers. Be sure to also set the font size to 100% or 1em, so that your page is accessible, but the size is still consistent. And be sure to include the line-height.

body {
font: 1em/1.25 Arial, Helvetica, sans-serif;
}

The master stylesheet should start by zeroing out the margins, padding, and borders on the page. Some Web browsers default the body of the document to 1 or 2 pixels indented from the browser pane edges. This makes sure that they all display the same:

html, body {
margin: 0px;
padding: 0px;
border: 0px;
}

Headline or header tags (H1, H2, H3, etc.) typically default to bold text with large margins or padding around them. By clearing the weight, margins, and padding, you ensure that these tags still remain larger (or smaller) than the text around them without having extra styles. You might want to consider setting specific sizes, letter-spacing, and padding to your headline tags, but that really depends upon the style of the site you’re designing and should be left out of the master style sheet.

Apart from headlines, there are other text tags that you should be sure to clear out. One set of tags that people over and over again forget are the table cell tags like TH and TD and form tags like SELECT, TEXTAREA, and INPUT. If you don’t set those to the same size as your body and paragraph text, you may be horribly surprised at how the browsers deliver them. It is also good to give your quotations (BLOCKQUOTE and Q), acronyms, and abbreviations a little extra style, so that they will be noticeable a little more:

blockquote {
margin: 1.25em;
padding: 1.25em
}
q {
font-style: italic;
}
acronym, abbr {
cursor: help;
border-bottom: 1px dashed;
}

Then you should also define a size for your SMALL and BIG tags so that you’re not surprised when you use them:
small {
font-size:.85em;
}
big {
font-size:1.2em;
}

With images, it is important to turn off the borders. While most browsers don’t display a border around a plain image, when the image is linked, the browsers turn on the border. To fix this:

img {
border: none;
}

Links are easy to manage. One way is to get your links underlined, but if you prefer it a different way you can set these options separately. You may not include colors in the master style sheet, because that depends upon the design.

a, a:link, a:visited, a:active, a:hover {
text-decoration: underline;
}

Tags: CSS Master Style Sheet