Downloaded from www.biorust.com on Tue Feb 07, 2012 11:15:19


	An Introduction to CSS Tutorial Author - Gus Mayo (http://www.gusmayo.com)

If you are a web designer and haven't been living in a cave for the last few years, then you must have heard of the amazing CSS technology! CSS is short for 'Cascading Style Sheets', and is a part of current web standards. Quite simply, it allows you to define your entire design from one simple document, making templates an utter doddle to set up and maintain. To help you get to grips with the new technology, this tutorial covers the basics of CSS setup, and helps get you well on your way to a more complete understanding of the CSS methodology.

Section 1: The Basics
Style sheets come in two distinct flavours - internal (i.e. the CSS definitions are part of the source HTML document), and external (i.e. All CSS definitions are in a separate file). For the sake of this tutorial we will be exploring external stylesheets only. All you need are two files - yourfile.html and yourfile.css. Put your CSS definitions in the .css file as simple text, and the HTML in the .html document. Section 4 will tell you how to link the files together.

body{ background-color:#000000; }

This small snippet is the CSS code to change the background color of your web site. Looking at it, we can break it up into a number of different components:

'body' - This tells the browser what is going to be affected. Using 'body' means that all <body> tags will have this style. This can be changed to any html tag. To have it apply to multiple tags separate each with a ','. Eg. body, font, td
'{' and '}' - The curly brackets encase all of the attributes assigned.
'background-color:' - 'background-color' is one of the many CSS attributes. It defines the objects background color, similar to the HTML attribute 'bgcolor'. Notice that it is followed by a colon ':'. All CSS attributes will have this colon.
'#000000' - This is the user-defined part of the attribute. Enter any six digit hexadecimal color value here. #000000 will produce a black background.
';' - The semicolon is very important. It is the closing tag for all CSS attributes and is needed the browser to tell when old attributes end and new ones begin.

Here is another example showing the syntax for using more than one attribute:

body{ background-color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

Section 2: The Class
If you want to define unique sets of variables for various uses (i.e. a 'bigtext' class for headings, and a 'specialtext' class for important text sections), then you will have to make use of classes. These are defined as follows:

The CSS:

.bigfont{ font-family:Arial, Helvetica, sans-serif; font-size:40px; }

'.' - The dot says that you are starting to declare a class.
'bigfont' - This is the user-defined name for the class. Call it whatever you want.
'{font-family:Arial, Helvetica, sans-serif; font-size:40px;}' - As with example 1, these are the user-defined attributes enclosed by curly brackets.

The HTML:

This is big text.

Now I'll explain CSS classes. Here is a rundown of the different components:

'class="bigfont"' - Here is where you select the class you want to use (and, hence, what attributes you want to apply to the font).

Classes are very useful because they can be used an infinite number of times, and can apply to whatever HTML tag takes your fancy (unless, of course, you declare attributes for a specific tag, which will be explained later). Just to make sure you have been listening, though, here's a few more examples:

Example 1:

<td class="bigfont"> This is big text inside a <td> with the same class applied. </td>

Example 2: Here is an example of a class made specifically for a tag. Notice the only difference is the preceding word 'font' before the '.'.

The HTML:

font.bigfont{ font-family:Arial, Helvetica, sans-serif; font-size:40px; }

The HTML:

This is big text.

Section 3: IDs
IDs work in similar ways to classes, except that they can only be used once (whereas classes can be used multiple times). For this reason, you should stick with classes for most formatting, and only use IDs for unique properties. Another reason they exist is to allow you to incorporate Style Sheet models into JavaScript or DHTML. If you want to give IDs a whirl, here's how to use them:

The CSS:

#bigfont{ font-family:Arial, Helvetica, sans-serif; font-size:40px; }

The HTML:

This is big text.

'#' - All ID's are started with a # sign, instead of the '.' used by the class.
'id="bigfont"' - Similar to the previous except now 'class' is replaced with 'id'.

The above example is valid coding, while this next example is not.

The CSS:

#bigfont{ font-family:Arial, Helvetica, sans-serif; font-size:40px; }

The HTML:

<td id="bigfont"> This is big text inside a <td> with the same class applied. </td>

Section 4: Linking to External CSS
Finally we get to the end. The last thing to know is how to actually use the stylesheet. Once you compile together all of your CSS into one file, save it with a .css extension.

Now go into your HTML document and add this line within your <head> tags:

Replace 'yourfile.css' with the path to the CSS file and 'Your Title' with whatever you want to call your stylesheet. And thats it! For more detail on attributes and settings, try accessing a reference site such as W3Schools. Enjoy your newfound skills!