Article printed from SiteProNews: http://www.sitepronews.com
  HTML version available at: http://www.sitepronews.com/archives.html

 
7 Compelling Reasons to Start Using CSS for your Website
By Bina Omar (c) 2005

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 its 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
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.

================================================================
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
================================================================

Copyright © 2005 Jayde Online, Inc.  All Rights Reserved.

SiteProNews is a registered service mark of Jayde Online, Inc.