Introducing Cascading Style Sheets

There are many different reasons why cascading style sheets (css) has caught on, mainly been the fact that it makes your site so easy to update and gives people so much more control over there work. Html and tables i feel should now be looked on as old school as you can accomplish so much more using Cascading style sheets and valid (X)HTML which eventually will give your page a better web ranking as well as making your page easier to maintain.

If you are interested in learning how to build web pages using cascading style sheets then you have come to the right place. Hopefully you will have a fair to good knowledge of (X)HTML if not please see our (X)HTML section.

Eventually as you become more confident with css you will be able to manipulate your pages more effectively as well as giving you an easier way to control the entire layout of your whole web page. Css is one file that is linked to by every page containing information such as colors and sizes of text as well as the layout and positioning of elements on the page. Using one file to control all of this allows you to easily change any of this information in the future.

In this first tutorial we are just going to get a general idea of the power of css, eventually we will move onto creating two and three column fixed and fluid page layouts which will give you full control when developing you pages for your own web site.

First of all we will talk about id's, these are identification tags of a specific element for which we can set the properties of from the style sheet. To set an id in a style sheet we start as shown below. You can see i have set a few basic properties such as font weight and the color of the text.

<html>
<head>
<title>Your first css page</title>
<style type="text/css" />
#red { color:red; }
#bold { color:red;
             font-weight:bold; }

</style>
</head>
<body>
<p id="red">This is a red paragraph</p>
<p id="bold">This paragraph is red with bold text</p>
</body>
</html>

Here you can see that i have set identification tags for the paragraph element which i referred to as an id inside the paragraph tag. You can set an Id tag for any element inside you style sheet by using the # key followed by the name of you tag. Id's can only be used once and if you would like to reuse your style then you can set a class by using a dot like so.

.red { color:red; }

You then call the class for that particular element by using the class property like so.

<p class="bold">This is your paragraph set to bold with a class called bold</p>

You can see above that we have full control over class's and Ids that we make but that's not all we can control we set properties for certain elements. Maybe we would like to make all the paragraphs red or all the h1 headings blue than you can do so like this.

<style type="text/css" />
p { color:red; }
h1 { color:blue; }
</style>

You can see that we now have full control over all the headings and paragraphs in the entire page. You can then change these colors at any time all from just one place. Cool ey? Of course it would be a bit boring if this is all we had control over so lets go ahead and create a full three column layout that you can use and manipulate to create your own pages. As we go through i will explain all new properties we come across and when is best to use them.


Three column layout >>

Links.


Web Hosting

Security

Spyware & Adware

Pop-up Blockers!