CSS basics

CSS stands for Cascading Style Sheets. It's a great way to make web pages look consistent and to apply special formatting to them.

This site uses CSS on each of it's pages to apply font styles, colours and text styles. This CSS is applied using a single file sat on our server.

By having a CSS controlled web site it means that we can change the colour/style of most things on all of our pages by only editting one file!

So, how do you use CSS? To start with I'll show you an example of how to apply font style, size and colour to a page.

<style>
 body	{font-family: arial;
	 font-size: 12px;
	 color: #000000;}
</style>

This "inline" Style Sheet will ensure your page has Arial as it's font in black with 12px high characters. Try copy and paste the above example into a HTML file to see the results!

You can also apply CSS directly to "tags" withing your page.

<b style="color: #FF0000;">Your text</b>

Would make the bold text inside that tag only appear as Red, bold text.

So that's the two "inline" methods covered, how do you do the really handy site wide style sheets? It's actually not that hard.

In the top of your HTML file, withing the HEAD part you need to reference the style sheet file you want to use.

<link rel=stylesheet type="text/css" href="/style.css">

Of course you actually have to have a file to reference. In the above example I'm pointing to a file called "style.css" sat in the root of my website.

The file is just a collection of CSS tags that are used throughout the site. A very simple example is shown below.

 body	{ color: #000000;
	  background: #FFFFFF;
	}

 td	{ color: #777700;
	  background: 000000;
	}

Other articles:

• CSS part 1