
home contact us back issues about us

January 8, 2001

The Fundamentals of Professional Web Sites

This Week’s:

Features

Step-by-Step: In the Beginning — The Purpose

On Focus: Writers - Part 1

The 13 Lucky Steps to Promoting a Web Site - Part 1

Background Checks!

Reviews

A Voice for Writers and Speakers

HTML Definitive Answers

Techniques

Making It Big - Large Background Images

Style Sheets for the Terminally Impatient

Technique

Style Sheets for the Terminally Impatient

by Carolyn Cooper

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.

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.

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.


		 
 		
           
				Find out how to arrange an independent consultation or a workshop for your conference or organization on this or any other Internet-related topic.
			
		
Top

		


			
		      
        	Copyright ©1995-2001 Carolyn E. Cooper. All rights reserved. 
 

		carolynecooper.com, web site consultation, workshops, design and development. Contact us at cpadmin@caine.com.