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