by Eileen Eva

Created on: March 10, 2011   Last Updated: March 12, 2011

A vast majority of websites today use CSS (cascading style sheets). This has replaced the use of tables that are time consuming and not aesthetically appealing. When used properly, cascading style sheets reduce the size of a webpage and website in general as well. This improves load time and chances of getting ranked by search engines that use load time as part of their ranking algorithm.

Web developers spend hours looking for errors in their CSS scripts that are identifiable using good design ethics and tools. Such include Firefox extension for web developers, Firebug "https://addons.mozilla.org/en-US/firefox/addon/1843 " or the W3C® CSS “http://jigsaw.w3.org/css-validator/” validation service.

How to troubleshoot CSS manually

The simplest and effective approach to troubleshooting CSS manually is by identifying the error, isolating it, fixing and then assembling the script again.  If you are having problems with fonts, begin by copying all the code from the “fonts” section of your script to a new page. This helps prevent spreading errors to other areas of your CSS script as you try to fix.

Common CSS errors

• Using the wrong syntax

Examples:

Using #classname instead of a period (.) to identify a class selector or spelling mistakes when declaring a function. Example using #container and later calling #Container

• Not closing your statements or forgetting to calling the from your HTML page

Example:

CSS declarations must end with a semicolon (;) between curl braces ({}) forgetting the semicolon will lead to errors. If you are loading CSS to your webpage from an external source like a CDN (content delivery network), you must declare it on the HTML else it will not load.

• Failing to declare “doctype” and support cross browser compatibility
Most browsers will handle lack of “doctype” well but Microsoft Internet Explorer will have major rendering issue if you forget to declare “doctype”.

Remember that if you are coding and testing with Firefox only, what looks good on Firefox might be junk on IE or Opera. Always test your CSS with popular browsers and use CSS Hacks to maintain cross browser compatibility.

Example:

Use “IF “conditional comments to declare browser specific functions like, <! - if IE ….. Whatever you place under the conditional comment will be used only when the webpage is accessed using Internet Explorer.

After you are through with fixing your CSS

• 1
• 2
• Next Page >>