Anatomy of a CSS Rule

Let's start learning about how CSS is written by looking at a simple CSS rule. For example, here's a rule that makes all text in all paragraphs of your document red

Anatomy of a CSS Rule
While a p tag in the XHTML markup is enclosed in angle brackets, in the CSS style, you just write the tag name without the angle brackets.

p {color: red}

So if you have this XHTML markup

<p>This text is very important</p>

then it will be red.

A CSS rule is made up of two parts: the selector, which states which tag the rule selects, (or, as I like to say, which the rule the selector targets)in this case, a paragraphand the declaration, which states what happens when the rule is appliedin this case, the text displays in red. The declaration itself is made up of two elements: a property, which states what is to be affectedhere, the color of the textand a value, which states what the property is set tohere, red. It's worth taking a good look at this diagram (Figure 2.2) so that you are absolutely clear on these four terms; I'll be using them extensively as we move forward.

Figure 2.2. There are two main elements of a CSS rule and two sub-elements.

Anatomy of a CSS Rule

Table of Contents