Learn Stylesheet

A master stylesheet should be the first stylesheet you call in all your documents. You use a master stylesheet to clear out the default browser settings that can cause problems in cross-browser Web design. Once you've cleared out the styles with a master stylesheet, your design starts from the same place in all the browsers - like a clean canvas for painting.

Global Defaults

Your master stylesheet should start by zeroing out the margins, paddings, 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;
}

You also want to make the font consistent. Make sure 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;
}

Headline Formatting

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:

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

You might want to consider setting specific sizes, letter-spacing, and paddings to your headline tags, but I find that that really depends upon the style of the site you're designing and should be left out of the master style sheet.

Plain Text Formatting

Beyond headlines, there are other text tags that you should be sure to clear out. One set that people often forget are the table cell tags (TH and TD) and form tags (SELECT, TEXTAREA, and INPUT). If you don't set those to the same size as your body and paragraph text, you may be unpleasantly surprised at how the browsers render them.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
margin: 0;
padding: 0;
font: normal normal normal 1em/1.25 Arial, Helvetica, sans-serif;
}

It's also nice to give your quotations (BLOCKQUOTE and Q), acronyms, and abbreviations a little extra style, so that they stand out 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;
}

Links and Images

Links are easy to manage. I prefer to always have my links underlined, but if you prefer it a different way you can set these options separately. I also don't 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;
}

With images, it's 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;
}

Tables

We've already made sure that the default text size is the same for your table cells, but there are a few other styles you should set, so that your tables stay the same:

table {
margin: 0;
padding: 0;
border: none;
}

Forms

Like with other elements, you should clear out the margins and paddings around your forms. Another thing I like to do is rewrite the form tag as "inline" so that it doesn't add extra space where you place the tag in the code. As with other text elements, I define the font information for select, textarea, and input up above, so that it's the same as the rest of my text.

form {
margin: 0;
padding: 0;
display: inline;
}

It's also a good idea to change the cursor for your labels. This helps people to see that the label will do something when they click it.

label {
cursor: pointer;
}

Common Classes

For this part of the master stylesheet, you should define classes that make sense to you. These are some of the classes I use most often. Note that they are not set to any particular element, so you can assign them to whatever you need:

.clear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.noindent { margin-left: 0; padding-left: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }

.nobullet { list-style: none; list-style-image: none; }

Remember that because these classes are written before any other styles and they are just classes, they are easy to override with more specific style properties that occur later in the cascade. If you find that you set a common class on an element and it doesn't take effect, you should check to make sure that there is not some other style in one of your later stylesheets affecting that same element.

When I'm building a Web page from scratch, I like to start with basic styles defined. It's like starting with a clean canvas and fresh brushes. One of the first problems that Web designers face is that Web browsers are all different. The default font size is different from platform to platform, the default font family is different, some browsers define margins and padding on the body tag while others do not, and so on. So I have a series of styles that I set as my default styles on Web pages.

CSS and the Character Set

First things first, I like to make sure that I set the character set of my CSS documents to utf-8. While most of the pages I design are written in English, some do get localized and I like to make sure that my Web pages can be localized as easily as possible. Setting the character set in the external style sheet won't take precedence over an HTTP header, but in all other situations it will.

It's easy to set the character set, for the first line of the CSS document I write:

@charset "utf-8";

This way, if I use international characters in the content property or as class and ID names, the style sheet will still work correctly.

Styling the Page Body

The first thing my default style sheet has in it is styles to zero out margins, padding, and borders. This makes sure that all browsers place the content in the same place, there aren't any hidden spaces between the browser chrome and the content. For most Web pages, this is too close to the edge for text, but it's important to start there so that background images and layout divisions are lined up correctly.

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

I also set the default foreground or font color to black and the default background color to white. While this will most likely change for most Web designs, I like to have these standard colors set on the body and html tag at first so that the page is easier to read.

html, body {
color: #000;
background: #fff;
}

Default Font Styles

The font size and font family are something that will inevitably change once the design takes hold, but I always start with a default font size of 1em and a default font family of Arial, Geneva, or some other sans-serif font. I use ems because I like to keep my pages as accessible as possible. And I use sans-serif fonts to keep the page more legible on the screen.

html, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}

There may be other places where you might find text, but I have found that p, th, td, li, dd, and dt are a good start for defining the base font. I also include html and body just in case, but many browsers will override the font choices if you only define your fonts on the html or body.

Headlines

HTML headings are important to use to help your site outline and let search engines get deeper into your site. But without styles, they are all fairly ugly. So I set default styles on all of them. I define the font family and the font sizes for each.

h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em ; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }

And Don't Forget the Links

Styilng the link colors is almost always a critical part of the design, but I've found that if I don't define them in my default styles, I typically forget at least one of the pseudo-classes. So I define them with some small variation on blue and then change them once I have the color palette for the site defined.

a:link { color: #00f; }
a:visited { color: #009; }
a:hover { color: #06f; }
a:active { color: #0cf; }

• links are blue
• visited links are dark blue
• hover links are light blue
• active links are even paler blue

By styling the links with a fairly innocuous color scheme it insures that I won't forget any of the classes, and also makes them a little less loud than the default blue, red, and purple.

The Full Style Sheet

Here is the style sheet written in full:

@charset "utf-8";

html, body {
margin: 0px;
padding: 0px;
border: 0px;
color: #000;
background: #fff;
}
html, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em ; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }
a:link { color: #00f; }
a:visited { color: #009; }
a:hover { color: #06f; }
a:active { color: #0cf; }