HTML and CSS Reference
In-Depth Information
The second selector,
.hotdog p.mustard
, had two class selectors and one type select-
or. Combined, the selector has a specificity point value of
0-2-1
. The
0
in the first column
is for zero ID selectors, the
2
in the second column is for two class selectors, and the
1
in
the last column is for one type selector.
Comparing the two selectors, the second selector, with its two classes, has a noticeably
higher specificity weight and point value. As such it will take precedence within the casca-
de. If we were to flip the order of these selectors within our style sheet, placing the higher-
weighted selector above the lower-weighted selector as shown here, the appearance of their
styles would not be affected due to each selector's specificity weight.
1.
.hotdog p.mustard {
2.
background: yellow;
3.
}
4.
.hotdog p {
5.
background: brown;
6.
}
In general we want to always keep an eye on the specificity weights of our selectors. The
higher our specificity weights rise, the more likely our cascade is to break.
Layering Styles with Multiple Classes
One way to keep the specificity weights of our selectors low is to be as modular as possible,
sharing similar styles from element to element. And one way to be as modular as possible
is to layer on different styles by using multiple classes.
Elements within HTML can have more than one class attribute value so long as each value
is space separated. With that, we can place certain styles on all elements of one sort while
placing other styles only on specific elements of that sort.
We can tie styles we want to continually reuse to one class and layer on additional styles
from another class.
Let's take a look at buttons, for example. Say we want all of our buttons to have a font size
of 16 pixels, but we want the background color of our buttons to vary depending on where
the buttons are used. We can create a few classes and layer them on an element as neces-
sary to apply the desired styles.
HTML
1.
<a
class="btn btn-danger"
>...</a>
2.
3.
<a
class="btn btn-success"
>...</a>
Search WWH ::
Custom Search