My Journey into CSS and DIV Tags

Published: February 5, 2009

I am an old time web designer that has been creating websites before CSS Style sheets and DIV tags became popular. Until recently, I resisted the urge to have all my fonts and site formatting controlled by an external CSS Style sheet or CSS File.

One of my clients insisted that I do everything possible to make his site as SEO compatible. After my research was completed I learned that CSS could be a valuable tool for my own website.

Here is what I have learned.

1. Use your CSS File to control all of your website formatting.
   1. Font styles, colours and sizes.
   2. Table definitions.
   3. Background colours & photos.
   4. Put all the photos that you can into the CSS Style Sheet because to the search engines, text content is what matters and not photos.  Google will sometimes penalize you if you have too many photos, or photos that are too large. 
2. Use meaningful names for your CSS style classes and other definitions. When you have a whole site completed and you look back at your site, style89 won’t mean anything to you.
3. Put all of your website content (text) into your website pages without formatting. All formatting should be in an external stylesheet.  Your html web page should contain your text content only if possible.
4. Tables - never use tables for formatting. Never use imbedded tables. Google will penalize for content located in imbedded tables. Replace tables with DIV’s wherever possible. Keep your JavaScripts as a separate .js file to be included on each page.

Putting my new skills to test, our new design process will be as follows:

1. Create PhotoShop version of template for client approval.
2. Create html version of template on Dreamweaver using only the external style sheet feature.
3. Go through the Dreamweaver version using a simple text editor and take out any extra unnecessary code. Make sure all tags are opened and closed properly.
4. Put every formatting options possible into my CSS Files using meaningful style names.
5. Create the rest of the site based on the template approved by the client.
6. Test your website on Explorer, FireFox, Safari and Opera. I found that even though the browsers are supposed to be 100% compatible, they all act differently and sometimes produce unexpected results.

About the Author
Rich Agnew is an author for The Computer Geek Custom Web Page Design and for CSSZafco.com, distributor of computers and accessories. Please visit the site to view a huge assortment of Computer Technology.