| If you want two or more selectors to have the same declarations, just put the selectors in a list separated by commas. The general syntax for a selector grouping is shown in Figure 2.20. Figure 2.20. The general syntax for a list of selectors, all receiving the same declaration block. 
You can define common attributes in the declaration block and then add rules for each selector individually, if you like, to refine them. In this example (Figure 2.21), the heading level 1, level 2, and paragraph tags are grouped to give them the same basic styles. The heading level 2 tag is then further refined for its specific purposes. Figure 2.21. The headers and paragraphs have the same styles set with the level-2 heading modified. 
To group selectors: | | 1. | h1,h2,p {...}
Type the list of selectors (HTML, class, or ID), separated by commas (Code 2.11). You can also add one or more line breaks, spaces, or tabs after a comma without interfering with the code to make it more readable.
Code 2.11. the <h1>, <h2> and <p> tags will all receive the same styles.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Defining Tags with the Same Rules</title> <style type="text/css" media="screen"> body { background-color: #fff; color: #000000; margin: 8px; } h1,h2,p { font: 1.5em Georgia, 'Times New Roman', times, serif; margin: 8px 0px; color: #999; } h2 { color: red; margin-top: 25px; } h1,h2,.authorName { font-variant: small-caps; } p,#dropBox { font-size: 1em; margin: 12px 0px; line-height: 125%; color: #666; } #dropBox { width: 300px; font: bold smaller Arial, Helvetica, sans-serif; padding: 6px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div > <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>Chapter VII<br /> <span >A Mad Tea-Party </span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice25.gif" height="219" width="288" alt="Alice" />'Do you mean that you think you can find out the answer to it?' said the March Hare.</div> <p>There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it...</p> </div></div> </body></html>
|
These selectors all receive the same declarations. CSS rules can be defined within the style tags in the head of your document (see "Adding Styles to a Web Page" earlier in this chapter) or in an external CSS file that is then imported or linked to the HTML document (see "Adding Styles to a Web Site" earlier in this chapter).
| | | 2. | font: 1.5em Georgia, 'Times New Roman', times, serif; margin: 8px 0px; color: #999;
Within the curly brackets, type your style declaration(s) to be assigned to all of the listed selectorsformatted as property: valueusing a semicolon (;) and separating individual declarations in the list. You can also add one or more line breaks, spaces, or tabs after a declaration without interfering with the code to make it more readable.
| 3. | h2 {...}
You can then add or change declarations for each selector individually to tailor it to your needs. If you are overriding a declaration set in the group rule, make sure this rule comes after the group rule in your CSS (see "Determining the Cascade Order" later in this chapter).
|
 Tips
IDs and/or classes can also be defined in the list: h1,h2,.authorName {...}or p,#dropBox {...}Grouping selectors like this can save a lot of time and repetition. But be carefulby changing the value of any of the properties in the combined declaration, you change that value for every selector in the list. Grouping selectors together does not directly affect their cascade order, but rather it is treated as if each one had this rule assigned to it in the order the selectors are listed.
|
