Getting Started in Cascading Style Sheets (CSS)

[sajiv]

Getting Started in Cascading Style Sheets (CSS)

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.

Okay, there may be just a bit more to it than that. If you currently have FONT tags specified in the source code of your web pages, then those will need to be removed so the CSS style can do its job.

Once all FONT tags removed from your page, let's experiment a bit. In the mysite.css file, change the font from sans-serif to serif