Anatomy of a CSS Rule

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 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.