Implementing CSS in your pages

There are basically two ways to implement CSS in your pages: one way is by using a style sheet and the other way is by using CSS directly in your page.

Style sheets

When you want to use a style sheet, it's really very simple: you can write your code in any preferred text editor and save with the extension ".css". All you need to do then is to link it in your page by using the LINK tag. The syntax is as follows: 

<LINK REL="style sheet"
TYPE="text/css" HREF="mysheet.css 
TITLE= "Default">

Now you have a style sheet that is no part of the HTML document but is used by it. Hence the word "external style sheet". The LINK element must be placed inside the HEAD element and not in any other element. The LINK element specifies the type of link (to a "style sheet"), the location of the style sheet via the "ref" attribute and the type of style sheet being linked: "text/css"

You can also set up a so called "alternate style sheet". This is an external style sheet that you offer to the reader so he can choose which style sheet he want's and subsequently which mark up he prefers. The syntax is the same as for the default external style sheet except for the REL element: this becomes REL="alternate style sheet". The value you use in the TITLE attribute will generate a list of style alternatives for the reader to choose from.

Another way to apply CSS is by using the STYLE element.

The STYLE element appears in the HTML document itself and should always use the attribute TYPE. In case of CSS, the value for TYPE is text/css.
When using this technique, you're using a container that starts with an opening tag containing STYLE TYPE="text/css" and finishes with a closing STYLE tag.
Between the opening and the closing tag you need to place your styles. Those are better known as the "document style" sheet or the "embedded style sheet". This sheet can contain styles that apply to the HTML document but it can also contain links to an external style sheet, using the "@import directive".

Now let's examine this a bit deeper.

The @import directive can be used to let the web browser load an external style sheet, just like the LINK element.
The difference between them is the syntax and the placement.
The @import directive is placed inside the STYLE container. It must be placed there and before all other CSS rules. If not, it will not work.

Another difference is that, when you use several @import statements, they all will be loaded, where as this will not be the case with the LINK element.

The @import directive can be used to take advantage from the fact that older browsers do not support (or do not fully support) CSS. Navigator 4.x for instance does not recognize the @import directive and consequently will not load the style sheet.

Like i already mentioned, the STYLE container can also contain styles that apply to the HTML document: the "actual styles".

For instance:

 P {color: blue;}

This will set the paragraph element to be blue.

Using CSS directly in your page

Besides the actual styles i just mentioned, there are styles directly applied inside the page.

They too use the STYLE element. They are there for cases where you want to assign a simple rule to an element, without having the need to use an embedded or external style sheet. These types of styles are referred to as "inline styles".

Where actual styles comprise the bulk of an embedded style sheet, inline styles are used for a simple "shortcut" to style an element. The syntax is almost the same as the declarations of the actual styles but the curly brackets are replaced by double quotation marks.

CSS Comments

Just like HTML, CSS also provides for you to make comments. The syntax is completely different from HTML comments: the comments are surrounded by /* and */ .

So you get something like /* this is my CSS comment */.

CSS comments can not be nested. Besides that there is one major rule to keep in mind: if you have several rules and you need to comment them alongside, make sure that each comment line is wrapped in comment markers. If you don't do this, the comment rules without markers will become part of the comment and will not work:

h2 {font-size : small;} /* a comment that is two */
h2 {font-size : small;} /* lines long */

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.

Friends

People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

The W3C Logo

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

The Creative Commons Licence logo