No doubt you've heard of Cascading Style Sheets, and how everyone is raving about how it is the best thing since sliced bread. 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", for intermediate users. By intermediate users, I mean those who can write some HTML and want to try out this new-fangled CSS thing as well. 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.
Note: this article was written back when CSS was the new kid on the block. At that time, thesitewizard.com's audience comprised largely of webmasters who knew how to code HTML by hand. Unless you fall into the class of people who actually know a bit of HTML but don't know what CSS is, this article is probably not relevant to you. For all others, if you want to find out is what CSS is, please read What is CSS? What is HTML? What is PHP? instead.
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 <body> HTML tag that has the "background" and "text" attribute, followed by a <font> tag.
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?
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 <h1></h1> 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 <font></font> 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 <h1> headers to use a sans-serif typeface at 24 point size, simply put the lines
between your CSS style tags, and anytime you use <h1>, 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 <h1> 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 <font> 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
and write your tables without the font tags, like
and you get the same effect.
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 <link> 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.
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.
The HTML code to utilize the above style sheet might look like the following:
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.
Update At that time this article was written, the majority browser of the day (Internet Explorer 6) did not implement CSS correctly. Today, all modern browsers support CSS, and you can thus ignore this section. I updated one of the paragraphs below some time ago to reflect the changing state, but things have again changed since then, so I've decided to let this section stand as it is for the historical record, but with a note to tell you that it's obsolete. (Note: only this section is outdated; the rest of the article above, describing CSS, is still valid.)
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 Firefox, Opera, Safari and Internet Explorer 8 and above. Internet Explorer 7 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 ones 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!
This article can be found at https://www.thesitewizard.com/archive/css.shtml
Copyright 2000-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Introduction To Cascading Style Sheets (CSS)
