- Doing Before Learning
- The Tag Soup
- Adding CSS Spices to the Tag Soup
- CSS Classes
- Specificity and Scalability
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Specificity and Scalability
The introduction of multiple CSS classes for each cell in my printout was close to the optimal solution, but I was still bothered by the fact that I had to define the same class for each cell in the table; I wanted to define the table format only once. Not surprisingly, CSS allows that as well with the specificity: You can define hierarchical selectors that can match a sequence of elements (for example, all TD elements that are children of a TABLE element with specific class), and the CSS specificity rules make sure that the most specific declarations are used. This feature made my definitions very simple; I could use the TABLE.printout TD rule instead of defining the .tCell class that would be applied to each cell. I also extended this idea a bit further—using very specific selectors (for example, TABLE.printout TD.tColOne) enables me to use the same column classes (.tColOne through .tColFour) for different table formats. The results are shown in Listing 7.
Listing 7 CSS style sheet and HTML markup with multiple classes per table cell
<style>
TABLE.printout TD, TABLE.printout TH {
font-size: 10pt; font-family: Verdana;
padding-left:8px; padding-right:8px;
padding-top: 2pt; padding-bottom: 2pt;
border-width: 2px; border-right-style: solid; }
.tLast { border-right-style: none !important; }
TABLE.printout TH { border-bottom-style: solid; }
TABLE.printout TD.tColOne,
TABLE.printout TD.tColTwo { text-align: left; }
TABLE.printout TD.tColThree { text-align: center; }
TABLE.printout TD.tColFour { text-align: right; }
TABLE.printout TR.tEvenRow { background-color: #C0C0C0; }
</style>
... skipped ...
<table class="printout">
<tr>
<th>Header #1</th>
<th>Header #2</th>
<th>Header #3</th>
<th class="tLast">Header #4</th>
</tr>
<tr>
<td class="tColOne">Row #1, Col#1</td>
<td class="tColTwo">Row #1, Col#2</td>
<td class="tColThree">Row #1, Col#3</td>
<td class="tColFour tLast">Row #1, Col#4</td>
</tr>
<tr class="tEvenRow">
... rest deleted ...
Lesson #5: Use hierarchical selectors instead of extra CSS classes.
This modification brings us almost to the end of the CSS journey, but to make it complete we have to consider scalability issues. Having the CSS style sheets embedded in the individual HTML documents is obviously not scalable because you have to change the same definitions multiple times when you change the look-and-feel of your web site. The style sheets should thus always be stored in external files and linked into the HTML documents.
Lesson #6: Store all CSS rules in external style sheets. Use the intra-document style sheets only to define exceptions that are local to a single document.
Last but not least, the same hierarchical structure that helped reduce the size of the HTML markup and the complexity of the CSS rules can be applied to the CSS style sheets. You can define formatting rules that are common to the whole web site in a single file that is later included into various external style sheets that cover individual sections of your web site (unless, of course, your site is small enough to use only a single set of formatting rules).
Lesson #7: If needed, break the CSS rules into multiple files and import the common files into section-specific files with the @import CSS rule.