Referencing CSS Classes

There are many ways to reference css classes and ids. With CSS3 being semi implemented in many modern browsers there is even more ways to use selectors in CSS. Below are a few ways that some people aren't familar with.

Attribute Selectors

input[type="button"] input[type="reset"] input[type="submit"]

The selectors above will select all input elements where the attribute type equals button, reset or submit. I feel that it was a rather dumb decision on the W3C's part to create a multi purpose element such as this. why not create an input, checkbox, radio etc. element like they did with the button element? Either way until recently, it has been impossible to select specific input types. With the advent of CSS3 we can now do this easily. This does not change the fact that EVERYONE should still use the button element rather than these.


Another things people often do which is unnecessary is repeat styles in various selectors. How often is it that we see the same font color set on numerous classes, or elements in one style sheet. By setting site defaults on the body, or html tag we can allow this to cascade down and not have to repeat work.

CSS Reset

One this many designers are doing now days is a global reset on their CSS. While this is a novel idea it still isn't practical. After all, if you set the margin and padding of all elements to 0px you have changed the default look of many tags. No longer will your lists be indented, no longer with paragraphs have double spacing at the end. You will have to redefine all of these over again. To me that seems like a waste. I think a better approach is by picking and choosing elements that are quirky in different browsers such as heading tags, form elements, and others.

* { padding: 0px; margin: 0px; }