Web Design in a Nutshell, 2nd Edition

Selectors

Selectors are the parts of the rule that identify the element (or elements) to which the style will be applied. There are several methods for identifying elements.

Type Selector

The simplest type of selector calls an HTML element by its tag, as shown:

H1 {color: blue}
H2 {color: blue}
P {color: blue}

Type selectors can be grouped into comma-separated lists so a single property will apply to all of them. The following code has the same effect as the previous code:

H1, H2, P {color: blue}

<div> and <span>

Two HTML elements, div and span, are generic identifiers ideal for use with style sheets. These elements have no inherent formatting properties of their own, but they can be used to designate elements on a web page that should be affected by style sheet instructions. These instructions are ignored by browsers that do not understand them.

The <div> tag is used to delimit block-level tags and can contain other HTML elements within it:

                     <DIV STYLE="color: blue">
<H1>Headline!</H1>
<P>This is a whole paragraph of text.</P>
</DIV>

The <span> tag is used inline to change the style of a set of characters:

<P>This is a paragraph and <SPAN STYLE="color: blue">>this area will be 
treated differently</SPAN> from the rest of the paragraph</P>

When used with the class and id attribute selectors (discussed later in this chapter), these tags can be used to create custom-named elements, sort of like creating your own HTML tags.

Contextual Selectors

You can also specify style attributes ...