::CSS Scripts::

Many of you may have heard of cascading style sheets (CSS) and may be using them in your site. They are a very useful tool if you are doing lots of updates to page designs. For those of you who don't know the CSS script is basically a text file with all your style settings for your webpage. Having all the styles in one place means that you only have to change on document to update multiple pages on your site. E.g. If you want to change the colour of all the text on your whole site or even the background image/colour.

View the CSS script for my site here.

Simple CSS Script

We first need to create the CSS document. This can be done in notepad or any other text editing software you may have. Basically all that has to be done is save an empty text document with the extension ".css" in the root of you website.

N.B. Quotation marks used in this article are not intended to be entered when creating CSS scripts

1. Open your blank CSS.
2. We need to create a handle so the webpage can read that style, I'm going to use "main" as an example. Type in your chosen handle name and add a period before it [e.g. ".main"]
3. We have to open and close the style statement with brackets [{}], so your statement should look something like this:
   .main { }
4. Now we need to set some styles that the handle "main" will follow. Lets start with the font, we are going to create a font family. The reason we use a font family is because the users browser will display the first font if it is loaded on the system, if however they do not have the font it will go to the next font in the list. This will stop pages not loading because the font isn't available. I'm going to use four fonts that are similar in appearance and are commonly used on webpage's, but you can change them to what you want. This is the code I am going to use: "font-family: Verdana, Arial, Helvetica, sans-serif;"
5. Now we will set the font size. There are loads of different ways in which you can set the font size, you can set the pixel size, the point size or use a CSS name. If you want a pixel size type the size [number] followed by "px" for point size do the same followed by "pt". I'm going to use a CSS named font size; "xx-small" So to create my statement we need to type: "font-size: xx-small;"
6. Now we will set the font colour. This is nice and simple, open your statement followed by the hexadecimal colour. I'm choosing a dark-grey "#333333" so my statement will look like: "color: #333333;"
7. We're done! Your code should look something like this:
   .main { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; color: #333333; }
   This is similar to the style that has been applied to this table to give you an idea of what it looks like :)
8. Now we need to attach this script to you webpage. This is done with one line of code in your head tag, changing "your.css" to the name of your file with the extension ".css":
   <link href="your.css" rel="stylesheet" type="text/css">
9. Now we have to point the page to load the specific handle you require in your CSS script. This will normally be affixed to a whole table, cell, layer or span. Simply attach the pointer in the tag with "class="main"". Note you will require the quotes around main.
   
   E.g.
      <table width="645" border="0" cellpadding="0" cellspacing="0" class="main"></table>

Roll Over Links