If you haven't heard of CSS, it's short for Cascading Style Sheets. I'm not going to go through what it is. There are many free articles and resources about CSS out there in the wild wild web.

Instead, I'm going to share with you why I decided to switch to a CSS based design.

I've known about CSS for quite awhile now but I used it minimally on my sites. Mainly to control the default font used in my web pages and also to define certain styles that I seem to use over and over again. I never gave much thought about using CSS to it's greatest potential.

I guess it was because I was already good at making web sites the way I made them, i.e. using tables. I didn't want to have to learn a totally new way of doing things. So I stuck to tables for as long as I could.

Unfortunately, 'as long as I could' turned out to be until the middle of last month.

It started with my WebSite Workshop members area. I had added a new section and needed to update my navigation. I had a roll-over navigation, pretty much like the one I have at Make-Your-Own-Web-Sites.com. The only difference is that when someone clicks on a button, a secondary navigation will appear below.

I used images as my navigation buttons. So, in order to add one more section, I had to create a new image for that section and resize all the other button images so they would all fit nicely in one line. To top it off, I had two sets of images. One for the default button and another that replaces the default button when someone hovers over it. Thus, creating a roll over effect.

After creating the button images, there was also the need to use tables to arrange them nicely in a row. And this whole table had to go into a row in the main table of the page.

After a few solid hours into it, I started thinking, this is crazy. There must be an easier way to do this. All I wanted to do was add ONE more section.

I did a quick search on the net and realized that there was an easier way ... using CSS.

I spent some time reading articles on CSS. Not so much about what it is or how to code it but rather what it could do and was I in for a surprise. Apparently, it could do more than I gave it credit for. Here are just some cools things about CSS:

1. Create roll over effects with ease

CSS makes it really easy to create roll over effects. You've probably seen this all over the web. If you haven't, just hop over to Make-Your-Own-Web-Sites.com. Check out the navigation at the top and the navigation on the right and links throughout the site. These were done using CSS only. No images required. Just view the source code and you'll find that the navigation is a simple unordered list.

2. Separate content from design

This one's a bit hard to explain. The best way I can think of to explain this is to point you to csszengarden.com. Hop over there now. You'll see a list of styles you can select. Click on a few and you'll see what I mean. The content remains the same but the design is totally different. This comes in really handy when you'd like to change the look of your site without touching your HTML web pages. Just change one CSS file and your whole web site has a new look.

3. No more tables ... almost

You no longer need extensive use of tables. No more nesting tables within tables. No more figuring out which closing table tags belong to which tables. No more deleting a single table cell and having your whole web site resemble chaos. You'll still, however, need tables to tabulate your data. But that's about it.

4. Easy site-wide changes

Need to change the color or size of your H1 tags? All you have to do is change the color and size once in your CSS file and all H1 tags in your web pages will change.

5. More design effects

CSS offers you more design effects than normal HTML. With HTML you can change the color, font and style of your content. With CSS you can change the background color (e.g. set it to yellow to create a highlighter effect), create borders, change letter spacing, word spacing ....

6. Faster loading time

Reduced table use and reduced image use will lead us to faster loading time. Need I say more?

7. Search engine friendly

Now that all your design code is in your CSS file, what is left in your web pages? You got it ... content. That's not all, with CSS, you can even put your navigation text and other 'non-content' content at the bottom of your HTML file but make it 'appear' at the top using CSS. This way, search engines will find the more important content first.

Enough said. I think now you can understand why I'm so excited about switching to a CSS based site design.

Copyright 2005 Bina Omar


About The Author


Bina runs the WebSite Workshop http://website-workshop.com, a membership site filled with tips, tools and tutorials for the novice webmaster. Subscribe to her free ezine, WebBriefcase!, and get your free 7 part course on ""How to Build Your Own Web Site in 7 Easy Steps"" mailto:subscribe@webbriefcase.net

How to Style an A to Z Index with CSS

I've always been taken with the way that the BBC styles their A-Z index using a simple list and CSS. However, because they use pixels to set the dimensions of each list item, the design breaks when you increase the text size.

CSS - Maximum Benefits

CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more re

7 Reasons Why Using CSS is a Must

CSS is a new option for website designers that have been using HTML and tables for most of their web designing careers. Of course, it is a huge change and requires learning a new language and skill, however most people are saying CSS is worth it and it wi

CSS in Flash the Return of Crisp and Legible Fonts

A typical challenge faced by Flash developers like me is getting fonts to look like you want then to. For any project choosing the right font face and size is a process that requires both you and ultimately the client to see eye to eye.

Cascading Stylesheets Advantages: 5 Reasons To Use CSS

Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!