CSS Basics

This tutorial will teach you the basics of CSS (Cascading Style Sheets).

We'll be looking at my current CSS, but your are not allowed to copy it - it's mine.

CSS is structured in a certain way: the tag followed by a { and then on the next line the code starts. Each sub-tag (eg, margin) is followed by a colon (:) and the line of code is finished with a semi-colon (;). Once you have finished defining a tag (eg, body), a } goes on the next line.

1. Usually the first thing I do, the body tag.

body {
margin:0px 0px 0px 0px;
background-color:#HEXCODE;
background-image:url(path/to/image);
background-repeat:repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

The margin tag defines the position of the body of your page. That is, the distance from the top, bottom etc. It goes top, right, bottom, left. Usually, I set it to 0px 0px 0px so the header is right at the top.

The background colour is what you choose it to be, but don't forget the hash (#) before the hex-code.

To use a background image, it'll need to be called from where it's stored. make sure you get it right - it'll probably be something like image/image1.jpg. You can tell the image to repeat or not using repeat (to repeat both X and Y axis), repeat-x (only repeat on X-axis - horizontally), repeat-y (repeat only on Y-axis - vertically), or if you don't want it to repeat use no-repeat.

Font-family defines which font will be used. In most cases it's Arial. Remember, the font won't appear on your visitor's screen unless they have it installed on their computer, or if you embed it. You can also choose what size your font will be.

2. Next, it's a good idea to customize things like bold, italics and links.

b, strong {
color:#HEXCODE
}

i, em {
color:#HEXCODE; border-bottom:1px solid;
}

I normally define both <b> and <strong> because some programmes/ blog scripts etc use one or another tag. Again, this can be customized just about as much as you like.

For italics, I normally define a colour and add an effect - underline etc.

Links are quite easy to customize. You need to define three basic things - link style, hover style and visited link style.

a:link {
color:#HEXCODE; font-weight:bold; text-decoration:none;
}

a:hover {
color:#HEXCODE; font-weight:bold; text-decoration:none;
}

a:visited {
color:#HEXCODE; font-weight:bold; text-decoration:none;
}

For simplicity, a:link and a:visited are normally kept the same - or similiar. It's a good idea to make a:hover slightly different - perhaps a different shade of the link colour, or text decoration.

3. It is also a good idea to customize the image tag. Otherwise, your images will be surrounded by the default blue border.

img {
border:0px;
}

The above code stops any border. But if you want one, define a size (width), style (solid or dashed etc), and finally colour.