websitewriters.co.za

CSS making sense

Posted by Raoul Snyman on May 8, 2006 on 10:50 pm | In (X)HTML, CSS, Design |

One of the things that is encouraged when designing standards compliant sites is correct naming of id and class selectors in your stylesheet.

What is a selector?

Simply put, a selector is a reference to a point in your HTML document. It can be an HTML element, an id or a class.

HTML element selectors are written as they appear in the document (eg. div), id selectors are prefixed with a hash to denote an id (eg. #header) and classes are prefixed with a period (eg. .current).

Making sense

The whole idea of stylesheets is separating content from layout and design. So the names of your id and class selectors should reflect that. They shouldn’t contain layout references like “right” or “left”, but rather functional or content references like “header”, “footer”, “content”, etc.

One last tip

The differences between id and class selectors. Id selectors can only be used once throughout the document, whereas classes can be used multiple times. You can also use more than one class in the class attribute of an element.

In addition to this, id’s have priority over classes. So if you have an id selector with a color attribute, and then you have a class with a color attribute, and you apply both of them to an element, the element will show the color attribute of the id, not the class.