Cascading Style sheet or CSS is one of the most used and convenient way of coding the mark up languages. Most of the websites are built on an HTML platform and hence it is important for us that the CSS is also correctly applied so that the information that the website wants to transmit to its viewers is precise. But, designers often commit fundamental blunders that can make things go terribly wrong for a website. The programmers and IT workers worldwide complain that CSS is not working. The problems may arise due to various reasons like lack of browser support or incomplete understanding on the part of the web page designer.

There are number of resources to help you find out the incorrectly written parts in the code. You need to make sure that there aren’t any errors in either your HTML or your CSS, since mistakes in either place can result in substandard document appearance. Some of the common mistakes that the programmers make are explained below.

For some reasons, the authors put spaces between values and their units. For example, P {margin-left: 100 px;}. Here is a space between 100 and px. That is totally wrong, as values and units are never separated by a space. The value will become invalid if there is a space. It means that the entire rule is invalid and your paragraphs won’t have a 100-pixel left margin. However, CSS validators can catch this mistake. But sometimes designers like to waste a lot of space in their code, by using plenty of unnecessary line-breaks or spaces before and after code. It’ll only make the stylesheet bigger, meaning it’ll cost you more in the long run, as your bandwidth usage will be higher. Of course it’s wise to leave some space in to keep it readable, though some people like to condense everything, leaving no space at all.

Another very common author error is the tendency to put HTML in places it shouldn’t be, especially external stylesheets. If you are linking or importing a stylesheet, then there should be no HTML whatsoever in that stylesheet. That includes HTML comments, the <style> tag or anything else.

Unless you are likely to be changing your code much, avoid using several lines when only one line can serve your purpose. For example, when setting borders, some people set each side separately when each border is the same. So condensing the code is required here. It is okay to style the same element twice, if it means avoiding the repetition mentioned in the point above. For example, let’s say you have an element where only the left border is different. Instead of writing out each border using four lines, just use two.

You don’t waste bytes by adding units such as px, pt, em, etc, when the value is zero. The only reason to do so is when you want to change the value quickly later on, otherwise declaring the unit is meaningless. Zero pixels is the same as zero points. In order to get the accurate choice of the color, you must specify the hex code rather than writing the color in plain English. Never forget to add hash “#” at the start of the code so that it can be parsed correctly. Otherwise, you will have to remember to add another hash to prevent errors. Designers must be careful about some common blunders so that they can design the web pages in a proper manner and convey the message to its reader correctly.

Tags: Beware of CSS Blunders