HTML and CSS Reference
In-Depth Information
p, div, .box {
color: black;
}
Here we're using commas to separate our selectors. This is a useful method to use to combine
multiple selectors in a single rule set. In this case, the styles will apply to all paragraph ele-
ments, all
<div>
elements, and all elements that have a class of
box
.
The Cascade and Specificity
At first glance, the following concepts can seem difficult to grasp. But the truth is, if you're
a CSS beginner, there are methods you can employ to ensure that they don't cause too many
problems for you.
First, let's look at what we mean when we refer to style sheets as
cascading
and how
speci-
ficity
ties in.
Usually, when a browser interprets a CSS document, it does so from top to bottom, giving
precedence—or overriding abilities—to the declarations that appear lower down in the docu-
ment.
Let's look at a simple example so you can understand what I mean when discussing preced-
ence and overriding abilities. Assume the following two declaration blocks appear in a single
CSS file:
p {
font-size: 20px;
}
p {
font-size: 30px;
}
Here we're using the exact same selector for both rule sets—the element type selector, which
targets all paragraph elements. The difference between these two rule sets, however, is the
value of the font-size property. Here we're defining the
font-size
twice for the same ele-
