Introduction to Cascading Style Sheets (CSS)
by Christopher Heng, thesitewizard.com
No doubt you've heard of Cascading Style Sheets, and how everyone is raving about how great they are. Unless you already know how to use it or are using it, you're probably also wondering what the fuss is all about, and whether you should change your web page to use it.
This article serves as an introduction to Cascading Style Sheets, often abbreviated "CSS". It is intended to give you an idea of what it is, what it is good for, and the pitfalls of using it. In other articles, I will deal with the nitty-gritty of writing web pages with style sheets.
1. What are Cascading Style Sheets (CSS)?
Like your web page, a cascading style sheet consists of ASCII text instructions telling the browser how it can format the document that is being loaded. The CSS instructions can be placed in the web page itself, or it can be placed in a separate document which is linked to the web page.
The simplest way to explain a cascading style sheet is to give an example of one.
Take the following code, for example, inserted in the HEAD section of a web page.
In a browser that understands style sheets, the code above would cause the page to have a white background and black text. The text in the body would be displayed using either the Arial typeface, the Helvetica typeface, or if neither are available, some other sans serif typeface. It has the same effect as a HTML tag that has the "background" and "text" attribute, followed by a
tag.
2. Why Use Cascading Style Sheets?
What's the big deal, then, you might ask, if the effects specified in a cascading style sheet can actually be implemented using old fashioned HTML code?
a. Formatting vs Function
The main reason cited by pundits of Cascading Style Sheets is that it allows you to keep formatting elements separate from functional elements.
For example, the tags (and the rest of the family) are designed to be used for headers. When you enclose text within these tags, the text is immediately obvious as a header. However, many web designers find that the default typeface and point size is not to their liking, and as a result resort to making headers appear within
tags instead of using the header tags. As a result, your document become littered with formatting code, and any change you make in one header has to be made to all headers in the document.
With cascading style sheets, if you like all your
headers to use a sans-serif typeface at 24 point size, simply put the lines
h1 {
font-face: san-serif ;
font-size: 24pt ;
}
between your CSS style tags, and anytime you use
, it would be in a sans-serif 24 point font. Change your mind about this and you will only have to change it at one location, the style sheet, and not in the entire document.
Your document can then be cleaner and you'll be using the appropriate HTML tags for the appropriate function (eg, a
for a header, etc) instead of filling up your document with all sorts of formatting code.
The beauty of style sheets also shines through in tables. How many times have you written tables like the following?
Many new web designers quickly realise that if they do not fill up their table cells with
tags, their table cells will display with the default browser fonts instead of the typeface and point size they used in the rest of the document body.
With CSS, all you have to do is to put a statement like
td {
font-face: Arial, Helvetica ;
font-size: 10pt ;
}
and write your tables without the font tags, like
... etc ...
and you get the same effect.
b. A Central Location
Just as style sheets allow you to put your formatting code in one location in your document, you can also separate out your style sheet and put it in a separate file. Then load the style sheet into your document with a simple tag in the head of your document.
So, for example, if you save your style sheet in a file called "formatting.css", then you might put a tag like the following in the HEAD section of your document:
How is this useful? It is useful when you want to apply a standard style across all the documents on your website. This way, when you want to make a change in say the colour of a table background, all you need to do is to modify your style sheet, and all your documents will automatically have the new appearance.
No longer is there any need of going through every single file on your website to make the changes, and accidentally forgetting one.
c. Browser-Independent Formatting
With older browsers, if you wanted to position certain elements you had to either resort to using tables or use browser dependent facilities like layers. Cascading Style Sheets allow you to create and position layers in a manner that works with all CSS-compliant browsers.
You can even position any text element without resorting to a table, and create interesting text effects. Take, for example, the following code which is to be placed into a style sheet.
.bannermain {
font-family: Arial Black ;
margin-left: 10px ;
color: green ;
font-size: 28px ;
}
.bannershadow {
font-family: Arial Black ;
margin-left: 8px ;
margin-top: -38px ;
color: darkgreen ;
font-size: 28px ;
}
The HTML code to utilize the above style sheet might look like the following:
My First Website
My First Website
When the text is displayed, you get a large green "My First Website" text which has a dark green shadow. If you put it into a coloured box, you can actually produce a "banner" without even needing a graphics file.
3. Problems with Using CSS Today
If Cascading Sytle Sheets are so wonderful, why isn't everyone using them?
The problem lies not in CSS per se, but in the fact that not everyone has browsers that support CSS correctly. In general, in the opinion of most webmasters, the browsers which have less buggy implementations of CSS include Opera, Safari, Firefox and Internet Explorer 7 and above. Internet Explorer 6 and its earlier incarnations have numerous issues with their CSS implementation that require webmasters to implement workarounds just to make them render complex pages correctly. Creating a site that has the same appearance on the modern browsers as well as older browsers is not an inconsiderable challenge.
However, increasing number of sites are moving to using CSS in their pages, including thesitewizard.com, particularly as the percentage of people using older browsers continue to drop.
Since CSS is obviously going to be the wave of the future, it is a good idea to be familiar with it. Besides, it really saves the web designer a lot of work, and it has a number of very useful facilities. Many web designers find that once they start dabbling with it, it's really very addictive!
