Slacker's Guide to HTML: CSS Selectors

CSS Selectors

Selectors
Contextual Selectors
ID Selectors
Class Selectors

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 text is set to have an overline (opposite of underline) applied to it. Therefore all text that appears within the em tag will not only be emphasized but also overlined. The selecor is em.

Contextual Selectors

Contextual selectors are "used when styles should be applied to a given element under specific circumstances."

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%. But the order of the two tags which are the selectors is important. The b tag is listed after the blockquote tag. We will refer to the b as being inside the blockquote tag in such a case.

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. That style only specifies that bold text also inside blockquotes should have a letter-spacing of 10%. Look at this HTML code:

<blockquote>
I like
<b>American</b>
music.
</blockquote>

That code, when in conjuntion with the style discussed above, would prouce this as a result:

I like American music.

The concept is simple. This gives you much more freedom to apply styles to tags because now you can specify different things to happen to the same tag in different instances of its use.

So, let's spice this up a bit, shall we?

Selectors don't have to be only HTML tags, though. You can also have ID and class selectors.

ID Selectors

Just as HTML tag selectors are HTML tags that we use as selectors, ID selectors are ID's that we will use to apply stles to things. If you use an ID instead of an HTML tag as a selector it lets you apply a particluar style to multiple HTML tags. For example, when you use an HTML tag as the selector the style will only apply to the tag(s) which you used as selectors. But if you create a style and give it an ID you can then attach that style to any HTML tag.

With ID tags you have two separate pieces of code you need to use to apply the style. You have to have the style declaration in the head of the document (or in an external style sheet) and you have to have the application of the style in the body of the document somewhere. Let's see an example of the declaration:

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

And here's an example of the application of that style:

<i id="redbig">This text will be big and red</i>l

We declared and described redbig in the first piece of code and we applied it in the second piece.

The most important aspect of using an ID selector is the fact that you can apply that style to other HTML elements, as well. For example, I can apply redbig to the bold tag or to the blockquote or table tag. I only had to define redbig one time and I can apply it to various tags. This can drastically reduce that mind-numbing time you spend repeated keystrokes.

You can attach an ID to specific instances of a tag, as well. Look at this example:

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

In that case we are declaring that all header tags of size 1 should also have the bigred style applied to them. The above code will not change the style of any headers except for H1 headers with the bigred ID attached, such as in the example below:

<h1 id="bigred">This header would be styles</h1>

In that example the only time a header will have the style applied is if the header includes an ID attached to it specifying it as having the bigred style

Class Selectors

Now we can discuss classes.

Just like ID's, but with a period (.) symbol. Well, maybe not that simple. Classes should be named with regard to what they are going to be used for. Notice that I named this example below ".smallprint". I did that because I will be using that style for my small print. Look at the example:

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

The class smallprint is set to be blue and small, obviously. The text is set to be 50% the original size. That is how you describe smallprint as small and blue. As emailer Andres pointed out to me, and as the W3C confirms, you should name classes with semantics in mind.

Now, as in the case of classes you have to "call" that style when you need it to be applied. Much the way you use the ID function you also use the class function. Look:

<p class="fineprint">
This text, which is enclosed in the paragraph 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="smallprint">
This text is also small and blue.</p>

...then all the HTML enclosed in the code tag would be little and blue.

ID = # (pound sign)
Class = . (period)
Three types of selectors: contextual, ID, and class
You can apply classes and ID's to single tags or multiple tags

Properties
Values