The Slacker's Guide to Cascading Style Sheets

Selectors, as I mentioned earlier in the Introduction to this tutorial, are the HTML attributes (a.k.a. tags) that specifiy what is being affected with that particular style. To recap, check out the example below:


em {text-decoration: overline}

In that example em, an HTML tag used to specify emphasized (usually bold) text is set to have an 'overline' (opposite of underline) with it. Therefore all text that appears within the em tag will not only be bold (probably), but also overlined.

Contextual Selectors

Contextual selectors are "used when styles should be applied to a given element under specific circumstances." *That quote is from the CSS Resource Guide. Here is an example of a contextual selector:


blockquote b {letter-spacing: 10%}

With this style you designate all text within both the bold tag and the blockquote tag to have a letter-spacing of 10%. So, text set in only the blockquote tag would not be affected by that style and text in only the bold tag would be unaffected by that. But, text inside both tags, like the word 'American' in the example below, would be affected by that style. Look at the example:


<blockquote>

I like

<b>American</b>

music.

</blockquote>

Pretty cut & dry, right? There's other types of selectors, though.

ID Selectors

Using an ID as a selector is rather simple, but without an explanation is might seem daunting. You use an ID, which can be any alpha-numeric combination, to specify a style. Look at my example:


#redbig {color: red; 
font-size: 200%}

That, above, is the part of the code where you define what "redbig" will do when applied to text. That goes either in your independent style sheets or inside the 'head' tag. Here is how you apply that style:


<p id="redbig">This text

is big and red</p>

As you might have noticed, the ID "redbig" was applied to a certain HTML tag and then that tag will take on the properties of "redbig". You could apply that same style, "redbig", to the italic (i) tag. Here:


<i id="redbig">This text

is big and red AND italic

</i>

Now we can discuss classes. Just like ID's, but with a period (.) symbol. There, discussion done. Look at this example.


.littleblue {color: blue; font-size: 50%}

The class 'littleblue' is set to be blue and little, obviously. The text is set to be 1/2 the original size. That is how you assign '.littleblue' as little and blue.
Now, as in the case of classes (just like ID's) you have to 'call' that style when you need it to be applied. You do that with this:

<p class=littleblue> This text, which is enclosed in the paragraph (p) tag, is both little and blue. </p>

As you might have guessed, just like in ID's you can interchange HTML tags to be used by that class. If you had written:


<code class=littleblue>

This text...

...blue.

</p>

then all the HTML enclosed in the code tag would be little and blue.
That should just about some up all the information on class selectors you need to know (or could know). That also signifies the end of the section on selectors. Other than this there are only two other 'things' that make up a style (the 'value' and 'property', which together make up the 'declaration'). But there are countless tricks and manipulations to be had with style sheets, whether used alone or coupled with javascript or dynamic HTML (DHTML).