Applying CSS

If you want a custom, uniform look to your site then use a style sheet to control the decor of your pages.
Most, if not all, aspects of your page can be set in a style sheet which means that any changes you want to make in the future has only to be done in the style sheet itself.

Imagine having over a 100 pages on your site and you decide you want to change all the H1 heading colours, thats 100 pages to edit, with a style sheet you edit one, the sheet itself.

There are three ways to apply CSS to your documents.

  1. Style Sheet
  2. Embedding
  3. In-Line

Creating a style sheet is easy, Using a text editor like Notepad type out your style definitions, excluding the style tags.

Once you have typed your definitions save the file (using a name of your choice) as yourfile.css

To link to your style sheet you need to add the following link to every page that the style sheet is going to be applied to. The link is placed in the <HEAD>section of the page.

<LINK href="yourfile.css" rel=stylesheet type=text/css> Change "yourfile.css" to the path and name of your file.

Here is an example of a simple style sheet.

body {background-attachment: fixed;background-image: url(../images/bkgnd.jpg);color: #500000}

A {color: #500000;text-decoration:none}

A:hover {color: #ccff99}

A:active {color: #55ff00}

A.lined {text-decoration:underline}

H1 {color: #aa3333;text-align: center}

H2 {color: #ac143c}

H2.left{text-align:left;color:#aa5500}

H3 {color: #cc143c;}

HR{color: #500000;height: 2px;width: 60%}

Embedding

A style sheet is perfect for many pages but for a few pages the embed method is just as good.

Note:
An embedded style will override a style sheet, and an In-Line style will overide a style sheet, and an embedded style, but the inherited rule may apply to some attributes

The style sheet is ideal for controlling the look of many pages but what if you want to display something differently on a particular page.
This can be achieved by using the Embed or In-Line method.

When you embed styles into an HTML document, you place the <STYLE></STYLE> tags within the <HEAD> section of the document. You must have both an opening <STYLE> tag and a closing </STYLE> tag.
The style definitions that you want to embed in the document are placed between these two tags.

<HTML>
<HEAD>
<TITLE>..........</TITLE>

<STYLE>

Your Style Definitions

</STYLE>

</HEAD>

Lets take the header tag <H1> </H1>as an example.
Any page that is linked to my style sheet and uses the <H1> tag will be displayed like this;

Your Header

All I have type is <h1>Your Header</h1>

Lets say that you wanted a number of pages to have a header with red text <H1>Header</H1>.
In those pages you could put:

<STYLE>
H1{color:red}
</STYLE>

YourHeader

<H1>YourHeader</H1>

You can use both the Style sheet and an embed by giving your new embedded header attribute a different class name.

<STYLE>
.newH1{color:red}
</STYLE>

YourHeader

<h1 class="newH1">YourHeader</h1>

In-Line

Whereas the Style Sheet and Embed methods give you control over many pages, or items in a page, In-Line allows the ability to control single items within a page, from a single letter to a complete paragraph.

Note:
The inherited rule may apply to some attributes.

This method gives just about total control over items in your page.

To impliment In-Line attributes you can either put the style attributes in a standard HTML tag:

<P style="color:maroon;font-weight:bold">Your Text</P>

Or place your text in <span></span> tags:

<span style="color:#FF00AA;font-weight:bold">Your Text</span>

The important thing to remember is that some attributes are inherent.

All the "<H1>Your Header</H1>" examples on this page are aligned to the center, yet I have only stated it once, in my style sheet.

Your Header

This is a good example of how some attributes are inherited throughout the document.
If you look at the red header example, above, I used the following "embedded" definition;

<style>
.redH1{color:FF0000}
</style>

<h1 class="redH1">Your Header</h1>

This changed the colour to red, but it was also centralised as well.
To place it to the left I would have to state that property and value to override my style sheet;

<style>
.redH1left{color:0000ff;text-align=left}
</style>

Your Header

<h1 class="redH1left">Your Header</h1>

Notice the shadow effect is present on all headers, (not in NS)