CSS (Cascading Style Sheets) are frequently used in webpages. CSS is easy to use and to change the whole layout of your site just with one file. I'm not going to explain every aspect op CSS here, because I don't know everything about it myself. I'm just going to show you all some usefull and easy things.

I'm going to explain some simple things first. In a CSS fil you make classes. These classes look like this:

I'm going to show you how to write an easy body part for your CSS in this tutorial. That means that in the end of this 'essay' you can easily declare your font, font colour, font size and background colour for your website. (Note: the most of the codes can be used also outside the body class)

Step 1:
Open an empty notepad file and save it as 'style.css'. To use the css file in your webpage, just add this code underneath the title tags in the header of the page.
<link rel="stylesheet" type="text/css" href="style.css">

Step 2:
Code this into your empty style.css file:

Now you've made the class. Because body is a known class in the HTML, you don't have to declare it in your webpage other than adding the code from step 1

Step 3:
Now we going to add some 'functions' to the Body class. First thing we're going to do is add the font. The line that makes sure which font is showing on your site:

That line makes sure the font on your site is going to be Verdana. If you want to have another font on your site, just change the 'verdana' part of the code. Past this code between the { and the } of the body class.

For the font colour you add the following code:

The colours are giving in hexa-codes. As far as I know you can get those codes in every photoshop like program, except Paint. To change the colour, just add another code, but please note! Don't remove the '#'.

To add the font size to your css, add this code. Please note! The size is in pixels


After adding all these things, the class will look like this:

Step 4:
Next thing we're going to add to the css is the background colour of your page. The code to declare it is the following one:

Your code will look like this:

I hope this tutorial is all clear, because I don't have any idea how to write is down properly. If you have questions, feel free to contact me.

Back to tutorials

(c) itsallgreen.org 2008
Questions? | Disclaimer