![[Image: GettyImages-182798262-57dc02755f9b58651672354f.jpg]](https://www.lifewire.com/thmb/vgNC-VPAYR17Oj05dkdkxwz9kqs=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages-182798262-57dc02755f9b58651672354f.jpg)
CSS and the Character Set
First things first, set the character set of your CSS documents toutf-8. While it is likely that most of the pages you design are written in English, some may be localizedadapted for different linguistic and cultural context. When they are,utf-8 simplifies the process. Setting the character set in theexternal style sheetwon't take precedence over anHTTPheader, but in all other situations, it will.
It's easy to set the character set. For the first line of the CSS document write:
@charset "utf-8";
This way, if you 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 nextthing a default style sheet needsare styles to zero out margins, padding, and borders. This makes sure that all browsers place the content in the same place, and there aren't any hidden spaces between the browser 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;
}
Set the default foreground or font color to black and the default background color to white. While this will most likely change for most webpage designs, having these standard colors set on the body andHTML tagat first makes the page easier to read and work with.
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 butstart with a default font size of 1emand a default font family of Arial, Geneva, or some other sans-serif font. The use of ems keep the page as accessible as possible, and a sans-serif font is 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, butp,th,td,li,dd, anddtare a good start for defining the base font. IncludeHTMLandbodyjust in case, but many browsersoverride the font choices if you only define your fonts forthe HTML or body.
Headlines
HTML headings are important to use to help your site outline and let search engines get deeper into your site. Without styles, they are all fairly ugly, so set default styles on all of them and 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; }
Don't Forget the Links
Styling the link colors is almost always a critical part of the design, butif you don't define them in the default styles, chances are you'll forget at least one of the pseudo-classes. Define them with some small variation on blue and then change them once you have the color palette for the site defined.
To set thelinksin shades of blue, set:
- linksasblue
- visited linksasdark blue
- hover linksas light blue
- active linksas even paler blue
as shown in this example:
a:link { color: #00f; }
a:visited { color: #009; }
a:hover { color: #06f; }
a:active { color: #0cf; }
By styling the links with a fairly innocuous color scheme, it ensures that you won't forget any of the classes and also makes them a little less loud than the default blue, red, and purple.
Full Style Sheet
Here is the full style sheet:
@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; }
![[Image: e72398fe92beda2aa80d0329e8b9f4febece7568.gif]](https://64.media.tumblr.com/834502d05f9b014cbc37366fe428a5a7/13cb9841c0799d7a-ff/s500x560/e72398fe92beda2aa80d0329e8b9f4febece7568.gif)