Monday, January 4, 2010

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.









    No comments: