Adding a Little Style - Head First HTML and CSS - page 292

The world's smallest and fastest guide to
how styles are applied

Elements and document trees and style rules and classes…it can get downright confusing.
How does all this stuff come together so that you know which styles are being applied to
which elements? As we said, to fully answer that you're going to have to know a little more
about CSS, and you'll be learning that in the next few chapters. But before you get there,
let's just walk through some common-sense rules of thumb about how styles are applied.

First, do any selectors select your element?

Let's say you want to know the font-family property value for an element. The first thing
to check is: is there a selector in your CSS file that selects your element? If there is, and it
has a font-family property and value, then that's the value for your element.

What about inheritance?
If there are no selectors that match your element, then you rely on inheritance. So, look at
the element's parents, and parents' parents, and so on, until you find the property defined.
When and if you find it, that's the value.

Struck out again? Then use the default

If your element doesn't inherit the value from any of its ancestors, then you use the default
value defined by the browser. In reality, this is a little more complicated than we're describing
here, but we'll get to some of those details later in the topic.

What if multiple selectors select an element?

Ah, this is the case we have with the paragraph that belongs to all three classes:

<p class="greentea raspberry blueberry">

There are multiple selectors that match this element and define the same color property.
That's what we call a conflict . Which rule breaks the tie? Well, if one rule is more specific than
the others, then it wins. But what does “more specific” mean? We'll come back in a later
chapter and see exactly how to determine how specific a selector is, but for now, let's look at
some rules and get a feel for it:

Here's a rule tha t selects a ny
old par agraph ele ment.
This rule selects members of the gre entea
class. That's a lit tle more specific.

p { color: black;}
.greentea { color: green; }

p.greentea { color: green; }

p.raspberry { color: blue; }

p.blueberry { color: purple; }