|
Send Feedback Print
Article
Email Article
 CSS Is Easy!
by Kevin Yank
Cascading Style Sheets. The name alone is intimidating, conjuring up images of cryptic code and syntax, too difficult for the layperson to grasp. In reality, however, CSS is one of the simplest and most convenient tools available to Web developers. In this article, I’ll guide you through the basics of CSS, showing how it can be applied to simplify the task of managing a consistently formatted Web site with minimal headaches.
The Problem with HTML
CSS is a language for defining the formatting used in a Web site. This includes things like colours, background images, typefaces (fonts), margins, and indentation. “But I do all that now with HTML tags,” you might think. “Why do I need CSS?” A valid question, and the best way to answer it is with an illustration of what is wrong with defining such styles using HTML.
A common design choice at present is to use a sans-serif font (like Arial, Verdana, Tahoma, etc.) for the main body text of a site. Since most Web browsers default to a serif font like Times New Roman, creating a complex Web page layout using a sans-serif font will often involve a lot of <font> tags. With the nested table layouts that have become commonplace on the Web, it would not be uncommon to see ten or twenty <font> tags simply dedicated to applying the same font to all of the text on the page. Multiply this by 5 pages for a modest site and we’re in the neighbourhood of one hundred tags. A beefier site might have 50 pages or more, in which case you’re looking at a thousand <font> tags, all dedicated to applying that one basic, consistent style to the text of your document.
Now here’s the kicker: what if your client calls you late one Friday afternoon to say, “Verdana is nice, but everyone uses it. Let’s use Tahoma instead.” Fancy search-and-replace tools aside, you are now faced with the task of adjusting one hundred, one thousand, or even more <font> tags to make what, from your client’s perspective, may seem like a very simple change. You can pretty much kiss that ski weekend you had planned goodbye. Try not to groan out loud – it doesn’t go over well with most customers.
If you know your HTML, you may be thinking that the <basefont> tag, which lets you set the default font to be used throughout a page, provides a nice solution to this problem. Even then, you’d have to adjust one tag for each page of your site. Add another font style to the equation (say you want to use a different font for that fancy navigation bar of yours), and the problem returns in full.
To this problem and others, Cascading Style Sheets are the solution.
| 
