From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Basic CSS 1 Selectors

The selector is the part of the CSS style definition that defines the exact elements to apply the style to. At its most basic, this is the actual element name. For example, if you wanted to style all your first-level headings as red, you would use an h1 selector:

h1 { color: red; }

CSS 1 Class Selectors

In the event that you didn't want to define every first-level heading as red, but only a sub-set, you can use a class selector (written as a string with a dot in front of it). For example, if you wanted that same h1 to be part of a sub-set of red h1s, with the rest staying as normal, you would use a class selector:

h1.red { color: red; }

CSS 1 ID Selectors

ID selectors work nearly the same as class selectors, only they only impact one element on the page (the one with that specific ID), and they are written with a pound-sign (#) at the front of the word. For example, if you had one ID'd h1 that you wanted red:

#myredh1 { color: red; }

CSS 1 Pseudo-Classes

In CSS 1 there are a couple of useful pseudo-classes that help you define styles based on characteristics of the element or page rather than specifically on the elements themselves. There are five pseudo-classes in CSS 1:

• a:link
  Defines an unvisited link.
• a:visited
  Defines a visited link.
• a:active
  Defines an active link.
• :first-line
  Defines the first line as it's formatted on the canvas.
• :first-letter
  Defines the first letter of text in the element. It is technically a pseudo-element.

CSS 1 Descendant Selectors or Contextual Selectors

CSS 1 selectors also allow you to define a selector based upon where it is in the HTML tree. For example, while you might want to make every h1 in your document red (using the basic selectors above), you might want to call more attention to any emphasized (<em></em>) text within that h1. While you could set another class on that em, it's easier to just set a special style on all emphasized text that falls within an h1. Use spaces to separate the tags, rather than commas, to indicate descendant selectors:

h1 { color: red; }
h1 em { text-decoration: underline; }

You can also use wildcards to define any number of levels in your descendant selectors. For example, if you wanted all q tags that were grandchildren of a div, you would write:

div * q { border: thin solid blue; }

This style will not affect any q's that are direct descendants of a div or q's that are not within a div at all.