Something I came across for the first time recently is the practice of using HTML element attributes to apply CSS styles.
The mathematics can be found at http://www.w3.org/TR/CSS2/selector.html#attribute-selectors, but a basic example of where I use this technique is as follows…
starting with a basic form…
To lay the form out cleanly we might apply a few simple CSS styles to the input elements, as follows…
border:1px solid #CCC;
font: normal 12px/12px arial,sans-serif;
giving us the following…
All well and good, but the submit button is a little kooky because, being an input element, it picks up all the styling rules that we just applied. It’s easy to fix this by applying a few extra CSS styles to the submit button specifically – changing the background color, maybe a rollover effect, stuff like that – and I’ve generally done this by creating a new class specifically for the styling of form buttons .
While this works perfectly well, adding class=”button” to our HTML is completely unnecesary, because we can isolate all submit buttons via CSS attributes. The syntax follows the pattern…
…and could work in the following manner:
giving us the following:
This can be used to isolate any HTML element you like – all forms with the method=”post” or all anchor tags with target=”_self” – anything really.
In fact now I type this out it occurs to me that the CSS selectors ‘.’ and ‘#’ (class and ID respectively) are just shorthand for the CSS attribute selectors element[class~=value] and element[id~=value] – more on the ‘~’ operator in another post.
The attribute selectors are a lot more powerful than demonstrated here, and I’ll write a bit about them soon but for the meantime you can read up for yourself at http://www.w3.org/TR/CSS2/selector.html#attribute-selectors.