CSS Tutorial: Getting Started

I am going to assume any style sheet file we are using is called 'style.css', and that it resides in the current directory. we Style sheet files can have any name and any extension and are referenced like any other file on your web server.

You can view the source code of any of these HTML pages or example HTML pages by using your browsers "View Source" menu item. This is usually located in the "View" menu at the top, or by right-clicking the mouse.

ok, let's get down to it, boppers!

Specifying the Style

The browser needs to know what style sheet or style elements being specified. There are several ways style can be specified:

1. embedding a style Style sheet information can be placed in the HTML file itself. The following tags goes in the HEAD portion of the document:

If you are familiar with JavaScript you will notice the same use of comments to fool older browser to ignore the extra code. The HTML specification states that browsers are to ignore tags they do not understand. Thus, an older browser reading this could would ignore the STYLE tag, and then bypass the style code because it is between HTML comments (<!--    -->)

2. Linking to a separate style sheet file. Instead of embedding the style code in each HTML file, you can put all of the style code in its own text file and link each document to that file. The following tag to link a style sheet is placed in the HEAD of the HTML document:

3. Importing a style sheet. You can also combine theÊabove two items by importing a seperate style sheet into an individual HTML file. For example you can import a basic sheet, and then add on extra styles to it. The import command is placed in the STYLE section mentioned above and should be the first thing in that section:

4. Inline style Style can also be specified on a per HTML element basis. Below is an example of specifying a 1" margin on one specific paragraph.