Scott Bush

Anyone worth his or her proverbial web development salt knows cascading style sheets (CSS) are the way to go to style content (and construct layouts, enable views for alternate medias, etc.). CSS employs “selectors” to target specific entitities in X/HTML, which can then be manipulated. (I’m glossing this over, of course; read any of the sites in my blogroll or Google CSS to dive into the ocean of CSS information.) Most people’s CSS use is limited the “big three” basic selectors:

1. Overriding HTML elements - Want to change the font for headings or the color of your page’s background? Add CSS rules for H1, H2, Hn and BODY.
2. Classes - Looking to group particular elements so they can be styled the same? Use a class selector, like .menu (note that period preceeding the class name, it’s important!).
3. IDs - Need to target a unique element, such as a footer or sidebar? IDs provide the means to do so. You’ll use a pound sign to select an ID in your CSS, like this: #footer.

Using these three alone get you pretty far, though CSS provides a number of more specific selectors wielded by the true CSS wizards.
The other day I was styling a simple log-in form for my organization’s wireless network. I’d increased the size of the username and password fields by overriding the INPUT element:

input {
font-size: 1.5em;
color: #006B0C;
margin: .25em .75em 0em 0em;
}

Unfortunately, the above rule also ballooned my form’s submit button, which was ugly. I knew there had to be a way to target a form’s button in CSS… and I found it:
input[type="submit"] { font-size: 1.0em; }
Note the bracket syntax above. It targets an element’s attributes, which was exactly what I needed for my form. I wanted big INPUTs, except when that input is a submit button (type="submit"). The same selector could be used to target links whose rel attribute is external, say.