Since writing the article about HTML errors I thought, why not list those common CSS errors too?
Using colour keywords
Ok, ok, this isn’t strictly an ‘error’ (it’s in the CSS spec), but in my book it’s wrong. Each browser supports colour keywords differently, so to be safe you might as well use another method. I personally prefer the hex notation, which can be very easily gathered from Photoshop or Paint Shop Pro, but the RGB decimal notation is also a useable notation.
Using inline styling
The ability to add style to a tag by using the style=”" attribute can be handy, but it also sort of defeats the whole purpose of using CSS. One of the major benefits of CSS is the ability to easily change a visual aspect of a website without having to change page after page. Sure, use inline styling for testing purposes, but keep your styles to an external file. And remember, if you’re using styles that are only for one or two pages, there really is nothing from stopping you using multiple external files!
Not using semantic class names
Again going back to being able to easily change the style of a site using CSS, keep in mind that your site will likely change when naming your tag classes. Using the class name “bigyellowbox” might seem like a good idea now, but in a couple of years will it still make sense when you change the colour to blue?
Using px for font size
Many people will disagree with me here, but I’m of the opinion that fonts on the web should be the same as fonts in any other medium. Fonts have always been measured in point since the early days of the paper press right up to the day of Microsoft Word. People say that using pixels makes it easier to line up text to images, but in my opinion the web is a fluid medium and shouldn’t be strictly controlled like that.
Using height
Again, I think that the web is a fluid medium, and setting a height of an element using CSS contradicts this. Anyway, it never quite works as you expect once implemented. There are many cases where the height of an element will be different to as you’d like such as the text being resized by the user, the font not existing on the user’s computer, site copy being changed, and one browser (incorrectly) rendering your CSS differently to another browser.
Using class and id incorrectly
There’s a subtle, but important, difference between the HTML class and id attributes; it might even surprise you to learn that an element can indeed have both.
- id is a unique identifier for that particular element. Effectively, it’s a name so that you can reference just that element (for example, the footer div) in your CSS and javascript
- class is less unique, and is a way of identifying the element as part of a group of elements. For example, a website might have restricted pages whose links you want to look different to those page links that aren’t restricted. This can be achieved by giving the link tag an attribute of class=”restricted-link”