To get going with CSS in your web design, use this series of CSS tutorials. Well post 2 a month here.

CSS files have the extention .css and are linked to the page using the link tag found inside the tags of your HTML document.

For example, my site’s style sheet may be called SiteStyles.css and it would be linked to as

<html>

<head>

<link rel=”stylesheet” type=”text/css” rel=”nofollow” onclick=”javascript:pageTracker._trackPageview(‘/outgoing/article_exit_link’);” href=”SiteStyles.css” />

</head>

<body>

Put my body here

</body>

</html>

In the style sheet itself you would have the CSS rules which contain the selector and the declaration.

The sector is the HTML element or the ID / class. Don’t worry about the the ID / class, we’ll cover them later, for now, lets just work with HTML Tags.

The declaration is the properties and property values the define the style attributes for the element you are styling. You write the property name, a colon and then the property value.

The properties and their values are enclosed within curly braces ( {} ) and are separated by semicolons (;).

So for example, for the

tag, I might want a certain font colour, so I could say in my style sheet:

p {color: red;}

This would work by assigning the colour red to all text withing the <p> tag.

See Example 1 to see how this works. The resultant page is loaded in the frame on the left. On the right, the CSS file is displayed on top and the HTML file is displayed underneath.

Now, what if I wanted to change the font colour to blue? Simple, I simply change the style to say blue and leave the HTML page as it is.

If I had 1000 pages on my website and I suddenly decided to change all 1000 pages from red text to blue text, I could easily do it in this one CSS file.

You may have noticed that the second line of text in the examples above is black. Why is that? Well, we have applied the style to the <p> tag, and since we are closing that tag after the first paragraph </p>, the style is no longer in effect.

But, what if you want your font to be a certain colour, and you’re not sure which tags they may be between (<p>, <br>, etc)? Well you can assign a style to the body tag, eg:

body {color: green;} (Example 3).

The tags work in a hierarchy of sorts, so, if you want to assign a default colour to the text, but want to be able to override it within certain tags, then use the body selector and the paragraph selector together, eg:

body {color:green;}
p {color:red;}

To see how that works, see Example 4

That’s it for lesson one. Just an easy little lesson to ease you into CSS.

SoftSmart.co.za provides Linux Web Hosting services and resources for web designers / web developers, like this CSS Tutorial