A Standard Style Sheet

Style sheets have actually been around for several years, and it has only been a fairly recently that the organizations that set standards for such things have started pushing for their use. The World Wide Web Consortium, or 3WC, has released two recommended standards for Cascading Style Sheets, referred to as CSS1 and CSS2. The latest versions of the most widely used web browsers provide good support for CSS1, while support for CSS2 is spotty.

Here is a basic style sheet that conforms to the CSS1 standard. It contains style rules for the most commonly used mark-up tags. If the same rule is to be applied to more than one mark-up tag, you can list them as shown in the first rule, separating the items with commas.

body, td, p, dd, dt {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10pt;
}
body, td, p, dd {font-weight: normal;}
b {font-weight: bold;}
dt {font-weight: bold;}
pre {
    font-family: courier,monospace;
    font-size: 11pt;
    margin-left: 15px;
}
th {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    background-color: silver;
}
h1 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 20pt;
    font-weight: bold;
}
h2 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16pt;
    font-weight: bold;
}
h3 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14pt;
    text-decoration: none;
}
h4 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12pt;
    font-weight: bold;
    text-decoration: none;
}
a:link {
	text-decoration: none;
	color: blue;
}
a:visited {
	text-decoration: none;
	color: red;
}

The last two rules for a:link and a:visited specify styles to be applied to hyperlinks in a web document. The first specifies that text displayed in an anchor tag should be blue with not special effects like underlining. The last rule specifies that if a given link has been visited, the text in its anchor tag should be displayed in red with no special effects.

Make Style Sheets Global

Part of the beauty of using style sheets is that you don't have to insert the style rules in every HTML file that will use them. By placing the style sheet entries in a file and saving it with the suffix .css you can easily reuse it on every page in a web site. This makes it much easier to create a consistent look for all the documents in a site. If you want to change to a single style rule, you only have to make the change in one place.

To use a file containing a style sheet, you should use the <link> tag in the head section of the HTML file. For example, if you had a style sheet named mystyles.css in the same directory as the HTML files that would be using it, you would use the following link tag.

<link rel="stylesheet" type="text/css" href="mystyles.css">

It is possible to use more than one style sheet in an HTML file. Just put a link tag for each style sheet file or use the <style> tag to embed the rules in the file.