Cascading Style Sheets (CSS); Getting Started

By Will Bontrager
2003-10-01


Getting Started
If you've been putting off using CSS because you have some uncertainty about exactly how to use it, then today is the day you'll get started. You'll see the simplicity of CSS. You'll realize that making style changes to your site's web pages is not only quick and easy, but also fun.

There are four ways a style can be applied to a web page. Only the first method is presented in this Getting Started article. The other methods are mentioned so you're aware they exist.

1. Styles are specified through the use of an external file, a method called "external style sheet" or "linked style sheet." This is the method you'll learn in this article. There is one file on your site that specifies the styles. Then, one line in each of your web pages links to that file. To change the style on all your web pages, simply change the external file.

2. Styles are specified in the HEAD area of each page the style is applied to. This method is called "embedded style sheet."

3. A style is specified in the actual HTML tag where the style is applied. This is called an "inline style."

4. A combination of embedded and external style sheets. For this, each page has an embedded style sheet. Within the embedded style sheet are certain codes that import one or more external style sheets. This method is called "imported style sheet."

To create an external style sheet, make a file named mysite.css with the following three lines:

BODY, TD, P, LI, BLOCKQUOTE {
font-family: sans-serif;
}

Upload mysite.css to the same directory on your server where you have your main index page.

Now, in the source code of one or more of your web pages, in the HEAD area, put this line (make a backup of the pages before changing, in case you want to restore to the original):

<LINK REL="stylesheet" TYPE="text/css" HREF="mysite.css">

(The above assumes your web page is in the same directory as the style sheet file, but that situation isn't required. The HREF="__________" URL can be a relative URL or an absolute http://... URL.)

That's all there is to it. Every page with the above line in the HEAD area will have it's text "magically" converted to a sans-serif font.

Tutorial Pages:
» Getting Started
» A Bit More...
» Got You Wondering?
» The One Exception
» Another A Tag


Copyright 2004 Bontrager Connection, LLC

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS