CSS

This page is one being affected by the update, please check back soon for the complete page

CSS (Cascade Style Sheets) is like an extension to HTML/XHTML, it allows more freedom over your content as well as less code (in most cases).

Lets start with something simple, links. You may of noticed the links on this page are bold and dark blueish but orange on mouseover (on browsers 5 up) and the page you are on, the link is opposite, also the links are not underlined on the naviagtion but are on the page. This is all done with CSS.

first we start with a open tag and end with a end tag, just like HTML
<style type="text/css">
<!--
a:link {}
a:active {}
a:visited {}
a:hover {}
-->
</style>

The above is the layout for internal pages (is typed on every web page effected), the other way I'll show you shortly is to use a seperate file .

The code I have displayed above is how you set it out, but it wont do anything, because we don't have anything in the brackets { }.

To change the color of a link, we use color:#00CC00;, if you use the color, we also need the background-color, best to use background-color:transparent; if you don't want one.
To change it to bold, we use font-weight:bold;
To make the underline go away, we use text-decoration:none;

so one whole section would be:
a:hover {color:#00CC00; background-color:transparent; font-weight:bold; text-decoration:none;}
Add/remove to suit

---

If we want to use CSS on every page in our site it's better to use one file and include it in the head section of everypage, this way we can change the whole sites layout (within reason) by changing one line.
When we make this page, do NOT add <style type="text/css"> or <!-- etc, just add the lines we want to add. Save this file as style.css or similar and include this page as mentioned like so:
... </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head> ...

This page isn't meant to be a full CSS tutorial so only hits on the main bits.

All the html tags can be used like so:
body { do stuff }
td, p {do stuff } etc. If we want to make something different we use a class to declare it, like so:
.aname{ do stuff } Notice the dot (fullstop) infront of the word 'aname', this declares a class. the 'aname' can be anything you want, but dont use html words.

To add this class into our page we just put class="aname" into nearly any HTML tag (note the dot isn't used this time).
Say you have made a class to make the text big and bold so the first letter of your sentence is big and bold we can do this:
<span class="aname">T</span>he day started off as any other day ...

the <span> tag has no next line, padding or whatever assigned to it, alone it's a useless tag.
The <div> tag is a common tag to be used with the class element but does have a built in line break in it, much like the <br /> does.

---

Another way apart from the two above to use CSS is inline, meaning in the actual tag. CSS is very universal and can be used in any of these ways without drawbacks, the only drawback I guess is what the browsers don't support.
Say we have all our links on our page with no underline, but one tag we want underlined. Kind of like how I have this site layed out, the side naviagtion has no underlined but this main text does.
we use an inline style like so:
<a href="html-css.php" style="color:#0000ff; text-decoration:none; font-weight:bold">this is a link</a> which would give us: this is a link

More soon