CSS

Cascading Style Sheets

External Style Sheets

The most powerful way to use CSS is to define a set of rules in a seperate file. This file must be in a certain format, the CSS format. It must also be named with the suffix .css. My css file might be called mystyle.css and have the following content.

H1 {font-size:36pt; color:blue;} H2 { font-family:'Comic Sans MS'; font-size:6cm; color:green; font-weight: bold} p {font-family:'Courier'; font-size:16pt; color:red; margin-left:0.5in;}

This file should be saved in the public html directory and given world readable permissions. Now any HTML page can reference this CSS page and aquire all the tag definitions that are in the CSS file. This is done by including a reference to the CSS page in the head of my HTML page.
Here is an example:

<html> <head> <LINK REL=STYLESHEET HREF="mystyle.css" TYPE="text/css"> </head> <body> </body></html>

Now any <H1> or <h2> or <p> tags inside this HTML page will be altered in accordance with the definitions I made in the file mystyle.css.

Embedded Style Sheets

Embedded Style Sheets are quite similar to External Style Sheets. The difference here is that instead of putting all the CSS commands in a separate file you insert them directly into the head of the HTML page. Here is an example:

<html> <head> <STYLE TYPE="text/css">  </STYLE> </head> <body> </body></html>

This method is more concise than external style sheets for dealing with one HTML page, but if you have many HTML pages that all need these CSS definitions then you would have to cut and paste these definitions into every page. This is a major disadvantage of embedded style sheets. BUt we will see later that you can combine the methods to create default definitions and over-ride them when need. That is called cascading.

Inline Style Sheets

The third way to use style sheets is by writing inline definitions. In this method you define an HTML tag when you use it. This definition only applies to one tag, therefore if you want several tags ( even of the same type) to have the same definitions, you must define each tag individually as it is used. Here is an example:

<html> <body> <P STYLE="background-color: #c1ffc1; font-family: Times; font-size: 14pt;">some paragraph text</p> <P STYLE="color:red; font-family: Times; font-size: 16pt;">some other paragraph text</p> <A STYLE="color:green; font-style:italic" HREF="./file.html">file </a> </body></html>

Note that in this last example the CSS information is in the body of the HTML page, in the tags.