What are ‘cascading style sheets’ and how to use them – A CSS Tutorial

For many people this is going to be second nature, but some of you may if not already be looking to build a website of some sort in the future and having a basis of Cascading style sheets would be beneficial.

Cascading Style Sheets or abbreviated as CSS are primarily used to simultaneously update your web pages and give the webmaster more control of layout of their webpage.

Prior to CSS, which is going back a while now, all elements would have to be coded in the HTML of a website / page which meant 2 things:

  • Pages never looked exactly the same due to human error, the link colours or headings were never quite the same.
  • If you changed your mind about what header to use on your pages and you have a 50 Page website, guess what you had to do? hmmmmm update them all…

CSS changes this concept basically by making it a lot easier to maintain your website. The idea is that you can change the code in one place and all the website pages would be updated simultaneously at once, without the need to have to revisit each page, find the code, and change it.

Cascading Style Sheets – How do I use them?

Using a cascading style sheet is easy, well maybe not yet, but wait you will know soon enough how easy it is.

To include a cascading style sheet into your webpage you need to embed a little piece of code to allow today’s browsers to know that you are using external styles to render your page.

Code:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

This code has to be implemented into the <head> </head> Section of your webpage. Your web browser will read this code and know that all your style commands are listed in the file ‘style.css’.

Is it that simple? Yes that’s the first part, but the second part is not much harder, just takes a little longer.

Coding the Style sheet itself

This part can be a little more time consuming as this is where you are going to code all the differnt styles you want. If you are using a Web design package like Adobe Dreamweaver I would recommend using their internal style sheet program which basically displays all the different elements you can put on your page.

For this simple tutorial (and feel free to ask below if you need further help) i will give you an example of how I would use a Cascading Style Sheet.

Code:

body {font-family: Arial, Verdana; font-size:12px; color:#999999;}

This code will tell the browser that where ever you see a ‘body’ tag (which every web page should have) the default font family or style will be Arial and if that for some reason is not available, to use Verdana instead. It will also tell the browser to render the default size of the font to 12 pixels and that the colour of that text be light grey or #999999.

Code:

h1,h2 { font-family:”Tahoma”; }

This code will tell the browser that wherever a webpage uses a h1 or h2 tag, that it must be the font “Tahoma”.

By now I am guessing that you can see the importance of CSS and how much easier it can be to use CSS than to code with styles embedded in the page. I must admit, sometimes I am lazy and I do that anyway, but as far as common practise goes, this is my approach to styling websites and I highly recommend you do this too.

Want More Info?

A bit of short tutorial I know, but you never know when you might need it. If you are looking for a better explained CSS Tutorial visit w3.org’s web site. They have one of the most comprehensive tutorials on cascading style sheets.