untitled

p.alert{color: red}

In the HTML, this paragraph tag matches the alertclass:

<p class=”alert”>

This is red.

</p>

Pause a moment to be sure that you have the terminology straight (it is a

bit confusing). In the following CSS rule, pis the selector, alertis the class

name, coloris a property, and redis a value of that property:

p.alert {color: red}

And, in an associated HTML document, here’s an element that matches this

selector:

<p class=”alert”>

In this element, pis the element (or tag), classis an attribute of that pele-

ment, and alertis the value of the class attribute.

Why is this confusing? Because these items have different names in different

locations. In a CSS file, pis called a selector,but in an HTML file, it’s called a

tag (or element). Also, alertis a class name (in the CSS file), but becomes a

value (in an HTML file). You just have to try to memorize these various cate-

gories and terms, or you can quickly get confused trying to make sense of

CSS. Take a look at Figure 3-1. It compares the terminology in two linked lines

of code: first the CSS rule, and then the HTML where that rule is applied:

A Style Definition in a CSS File

A Matching Element in an HTML Document

Selector

Class name Value

Property

p.alert {color: red}

Element (tag)

Attribute

Value

<p class = "alert">

Figure 3-1:
This figure
illustrates a
CSS rule
and a
matching
HTML
element.

Chapter 3: Up and Running with Selectors 51