Writing CSS Rules
This basic structure of the selector and the declaration can be extended in three ways:
 | CSS demands absolute accuracy; a missing semicolon can cause CSS to ignore an entire rule. |
Multiple declarations can be contained within a rule.
p {color:red; font-size:12px; line-height:15px;}
Now our paragraph text is red, 12 points high, and the lines are 15 points apart. (For all practical purposes, a point is the same as a pixel; pixels are the tiny dots that make up your screen display.)
Note that each declaration ends with a semicolon to separate it from the next. The last semicolon before the closing curly bracket is optional, but I always add it so that I can tack on more declarations later without having to remember it.
Multiple selectors can be grouped.
If, say, you want text for tags H1 tHRough h6 to be blue and bold, you might laboriously type this
 | You may be wondering what other values properties such as font size and color may have. For example, you might want to know if you can specify a color using RGB (red, green, blue) instead of a color name (the answer is yes, you can). For now, just hang in there while I focus on showing you how selectors work. Then, later in this chapter, I'll show you the declaration part of the rules. |
h1 {color:blue; font-weight:bold;}
h2 {color:blue; font-weight:bold;}
h3 {color:blue; font-weight:bold;}
and so on.
But you don't have to; you can group selectors in a single rule like this
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold}
Much easier! Just be sure to put a comma after each selector except the last. The spaces are optional, but they make the code easier to read.
Multiple rules can be applied to the same selector.
If, having written the previous rule, you decide that you also want just the h3 tag to be italicized, you can write a second rule for h3, like this
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
h3 {font-style: italic;}
|
