CSS Selectors

In order to refer to elements in XHTML documents from CSS, we need to have a solid understanding of selectors.

Tags: The Basic Selector

The most basic CSS selector is the tag name itself. So, for example, if we wanted all of our paragraphs, which are of course marked with the <p> tag, on a given XHTML page to display in blue, our CSS file would have the following instructions:

p {
  color: blue;
  }

Alternatively, if we knew we wanted all of the text on the page blue, we could declare this through the <body> tag, which contains all of a page's tags. Because styles cascade or are inherited by their containing tag, we don't have to declare blue for the <p> tag:

body {
  color: blue;
  }

Grouping Selectors

Let's say, though, that we wanted all of a page's text—everything from paragraphs to lists to blockquotes—to be blue, but the headers to be black. We can achieve this with the following code, which again makes the body blue, but specifies black text for the headers. We just list all of the headers (1-6) separated by commas:

body {
  color: blue;
  }
h1, h2, h3, h4, h5, h6 {
  color: black;
  }

Class and ID selectors

Another selector we can use is to refer directly to a class or id used in our XHTML document. For example, let's say we have a class called "important," as in the following XHTML snippit:

<p class="important">Important text.</p>

We might decide that everything that gets the class "important," whether a paragraph or a list item or even a hyperlink, is displayed in bold, red text. Our CSS would then look like this:

.important {
  color: red;
  font-weight: bold;
  }

As you can see in the above CSS, we refer to classes by using a dot, . And if we knew that only paragraphs were going to take the "important" class, or if other items with the important class would look different (like a list item), we could also write our CSS like this:

p.important {
  color: red;
  font-weight: bold;
  }

Now, we can do the same thing with ID selectors. Let's say we have a <div> tag with an id of "navigationbar," and that we wanted its background color to be yellow. We could do that in the following CSS:

#navigationbar {
  background-color: yellow;
  }

However, remember that there can only be one unique ID per page. If the ID here goes with a <div> tag, it makes more sense to refer to it in the CSS like that:

div#navigationbar {
  background-color: yellow;
  }

Contextual Selectors

A more advanced way of controlling the look of an XHTML document is to use contextual selectors. For example, let's say we wanted our navigation items to be displayed in a list without any bullet points in the div#navigationbar, as in the following XHTML snippit (for clarity, we'll leave out the necessary <a> tags we'd need to make these actual links):

<div id="navigationbar">
  <ul>
   <li>Home Page</li>
   <li>Vita</li>
   <li>Contact Me</li>
  </ul>
</div>

Our corresponding CSS would then do this:

div#navigationbar ul {
  list-style-type: none;
  }

The space between div#navigation and ul simply means "show ul like this when it occurs inside of div#navigation." The CSS vocabulary would be "show ul like this when it is a child of div#navigation."

Pseudo-class Selectors

There are a number of so-called pseudo-classes, which are classes based on user action. Currently, Internet Explorer only supports pseudo-classes associated with the <a> tag, which we'll cover here, but there are others.

Any link has a possibility of four states: a link (just sitting on the page being a link), an active link (a link that is being clicked on), a visited link (a link that has been clicked on previously), and a hover link (a link with someone's mouse over it, but not being clicked). We refer to these in CSS in the following ways, and in the following order:

a:link {
  }
a:visited {
  }
a:hover {
  }
a:active { 
  }

We must put them in this order so that visited links will still reflect their hover state, and active links after hover so that there is a change (if we want one) when a user is clicking on a link. Keep in mind most people click a link and are off to wherever they want to be—so the active pseudo-class is usually of limited value.

One word of caution about the hover and active pseudo-classes: It's best practice to avoid style declarations that will change text width between the :link and :hover or :active pseudo-classes. For example, if our :link and :hover pseudo-classes were declared like:

a:link{
  font-weight: normal;
  }
a:hover {
  font-weight: bold;
  }

All of our text would shift around when the user hovers over the link. This could even cause text to flow onto additional lines, which looks incredibly junky. The same were true if we specified different font-sizes, too.