Article
The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 1 - Getting Started with CSS
CSS Selectors
Every CSS style definition has two components: the selector, which defines the tags to which the style will be applied, and the properties, which specify what the style actually does. In the previous example, the selector was h1, h2, specifying that the style should apply to all <h1> and <h2> tags. The remainder of the style definition comprised the attributes, specifying the font and color that should be applied by the style. In this section, I'll describe the basic CSS selector types and give examples of each.
Tag Selectors
The most basic form of selector is that which we have already seen. By naming a particular HTML tag, you can apply a style definition to every occurrence of that tag in the document. This is often used to set the basic styles that will appear throughout a Website. For example, the following might be used to set the default font for a Website:
body, p, td, th, div, blockquote, dl, ul, ol {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
This rather long selector is a list of tags, all of which will take on the style definition (font, size, and color). In theory, the <body> tag is all that's needed (as all the other tags appear inside the <body> tag, and would thus inherit its properties), but many browsers don't properly carry style properties into tables and other elements. Thus, I specified the other elements for the sake of completeness.
Pseudo-Class Selectors
The formatting of the <a> tag in HTML is more versatile than is the formatting of most other tags. By specifying link, vlink, and alink attributes in the <body> tag, you can set the colors for the various states of the links in your page (unvisited, visited, and being clicked on, respectively). CSS provides its own way of doing this, and adds a fourth state that's applied when the mouse hovers over the link. Consider the following example:
a:link { color: #0000FF; }
a:visited { color: #FF00FF; }
a:hover { color: #00CCFF; }
a:active { color: #FF0000; }
This code contains four CSS style definitions. Each of the selectors uses what is termed a pseudo-class of the <a> tag. The first, link, applies to unvisited links only, and specifies that they should be blue. The second, visited, applies to visited links, and makes them magenta. The third style definition, hover, overrides the first two by making links light blue when the mouse is moved over them, whether they've been visited or not. The final style definition makes links red when they're clicked on. Because active appears last, it overrides the first three, so it will take effect whether the links have been visited or not, and whether the mouse is over them or not.
Class Selectors
Assigning styles to tags is all well and good, but what happens if you want to assign different styles to identical tags occurring in different places within your document? This is where CSS classes come in. Consider the following style, which makes all paragraph text in the page blue:
p { color: #0000FF; }
Now, what if you had a sidebar on your page with a blue background? You wouldn't want text in the sidebar to be blue as well, because it would be invisible! What you need to do is define a class for your sidebar text, then assign a CSS style to that class:
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
This second rule uses a class selector that indicates that the style should be applied to any tag of the sidebar class. The period indicates that a class is being named, instead of a tag. To create a paragraph of text of the sidebar class, you add a class attribute to the tag:
<p class="sidebar">This text will be white, as specified by the
CSS style definitions above.</p>
Now, what if there were links in your sidebar? By default, they'd be rendered just like any other links in your page; however, add a class="sidebar" attribute to the tag, and they'll turn white, too:
<p class="sidebar">This text will be white, <a class="sidebar"
href="link.html">and so will this link</a>.</p>
That's pretty neat, but what if you wanted to make the links stand out a bit more by displaying them in bold text? Adding the bold text attribute to the sidebar class will make your whole sidebar bold. You need a CSS selector that selects links of the sidebar class only. By combining a tag selector with a class selector, you can do exactly that:
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
a.sidebar:link, a.sidebar:visited { font-weight: bold; }
Note that we've also used the :link and :visited pseudo-classes to specify <a> tags that are links (as opposed to <a name="…"> tags that are not).
Note also that our sidebar links are still white—both of the styles pertaining to the sidebar class apply to our sidebar links. If we specified a different color in the third style, however, links would adopt that new color, because the third selector is more specific, and CSS styles are applied in order of increasing selector specificity.
Incidentally, the process of applying multiple styles to a single page element is called, and is where Cascading Style Sheets got their name.
Contextual Selectors
If your sidebar happens to contain a lot of links, it becomes tedious to assign the sidebar class to every single <a> tag. Wouldn't it be nice to use a selector to select any link that appeared inside a paragraph of the sidebar class? That's what contextual selectors are for: selecting a tag based on its context, that is, based on the tag(s) that contain it.
Here's the new CSS:
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
p.sidebar a:link, p.sidebar a:visited {
font-weight: bold;
color: #FFFFFF;
}
And here's the updated HTML:
<p class="sidebar">This text will be white,
<a href="link.html">and so will this link</a>.</p>
As you can see, a contextual selector provides a list of selectors separated by spaces that must match tags "from the outside in." In this case, since the link (matched by the a:link or a:visited selector) occurs inside a sidebar paragraph (matched by the p.sidebar selector), the style applies to the link.
Note that, to keep the link white, we had to add that color to the CSS attributes for the links, as the style for the sidebar class no longer applies to the links.
ID Selectors
Similar to class selectors, ID selectors are used to select one particular tag, rather than a group of tags. The tag that you select is identified by an ID attribute as follows:
<p id="sidebar1">This paragraph is uniquely identified by the ID
"sidebar1".</p>
An ID selector is simply the ID preceded by a hash (#). Thus, the following style will make the above paragraph white:
#sidebar1 { color: #FFFFFF; }
ID selectors can be used in combination with the other selector types. The following style, for example, applies to unvisited links appearing in the sidebar1 paragraph:
#sidebar1 a:link {
font-weight: bold;
color: #FFFFFF;
}
Other selector types exist, but they're not widely used. Support for them in some browsers (especially Netscape 4) is buggy at best.
CSS Properties
In the examples used so far in this chapter, we've used several common CSS properties like color, font-family, font-size, and font-weight. In the rest of the book, we'll be using these properties—and a lot more.
Summary
This chapter has given you a taste of CSS and its usage at the most basic level. If you haven't used CSS before, but have a basic understanding of the concepts discussed in this chapter, you should be able to start using the examples in this book. The examples in the early chapters of this book are somewhat simpler than those found near the end, so, if you haven't worked with this technology before, you might want to begin with the earlier chapters. These will build on the knowledge you gained in this chapter to get you using and, I hope, enjoying CSS.
Watch out for the next chapter of The CSS Anthology: 101 Essential Tips, Tricks & Hacks -- it'll be on SitePoint soon. Or, if you can't wait, download the fist 4 chapters free now.