There, three simple cascade rules. That was much easier, wasn??™t it?
Cascade Rule 3: Sort by speci?¬? city. Besides being very hard to pronounce,
speci?¬? city determines just how speci?¬? c a rule is. I tried to
get you started on this idea by using the word speci?¬? c in exactly this
way many times while we were discussing selectors. As you saw, if a
style sheet contains this rule
p {font-size:12px;}
and this rule
p.largetext {font-size:16px;}
then this markup
A bit of text
displays text 16 pixels high because the second rule is more speci?¬? c??”
it overrides the ?¬? rst rule. This may seem intuitively obvious, but what
happens to that bit of markup if you use these styles instead?
HOW CSS WORKS 59
p {font-size:12px;}
.largetext {font-size:16px;}
Both these rules match the tag, but the class overrides, and the text
is 16 pixels. Here??™s why: the numeric speci?¬? city of the tag selector is
1, but the class has a speci?¬? city of 1-0. Here??™s how to calculate the
speci?¬? city of any selector. There is a simple scoring system for each
style that you plug into a three-value layout like this:
A - B - C
The dashes are separators, not subtraction signs. Here??™s how the
scoring works:
1. Add one to A for each ID in the selector.
2. Add one to B for each class in the selector.
3. Add one to C for each element name (tag name).
Pages:
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96