Style Sheets for the Terminally Impatient

/in /by

Okay, you say you want your pages to look good, but hate coding font styles over and over and over? Well, welcome to the external style sheet. The large majority of browsers support cascading style sheets. There are three ways to add style attributes to a tag under the current HTML and XHTML standards: inline styles, document-level styles and external style sheets. The fastest, easiest way to create a consistent style throughout your site is by linking to an external style sheet. I’ll save all the gory details of style sheets for another time.

An external style sheet is merely a text file containing the tag and its related attributes. It looks like this:

body { color : #000;
background-color : #fff;
}

A:link { color : #f30;
}

A:visited { color : #f63;
}

h1 { font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 22pt;
line-height: 160%;
color : #f93;
}

We’re in hurry here, lady, speed it up.

First, you need a style sheet. I made one for you.

  1. Click here to download a style sheet similar to one used for this page. You will need to save the page to your machine.

    At the command menu, click on File > Save As.

    Save the page as a plain text format and name it “elementary_style”. If you get a choice of extensions, use “.css”. The “.css” extension will readily identify the file as a cascading style sheet.

Next you need to add a link to the style sheet in your web page code.

  1. Inside your <head> tag (after the <title> and any meta tags), add the following line of code:

    <link href=”elementary_style.css” rel=”stylesheet” title=”Elements of Web Style Stylesheet”>

That’s it — at least for basic styles.

I’ve included a special style for navigation and copyright or anything else you want in a smaller font. It looks like this:

.navigation { font-family : Arial, Verdana, Geneva, Helvetica,sans-serif; font-size : 10pt; line-height : 11pt; }

To use it, you simply wrap the text in a paragraph tag (<p>) with the class defined as “navigation”. So that the HTML code looks like this:

<p class=”navigation”> This is some text I want displayed smaller. </p>

And this is the result:

This is some text I want displayed smaller.