HTML and CSS Reference
In-Depth Information
Q:
So how does that work when you
have more than one rule for an element?
A:
You can have as many rules as you
want for an element. Each rule adds to the
style information of the rule before it. In
general, you try to group together all the
common styles between elements, like we
did with <h1> and <h2>, and then any style
that is specific to an element, you write in
another rule, like we did with the border-
bottom style for the main heading.
Q:
What's the advantage of that
approach? Isn't it better to organize each
element separately, so you know exactly
what styles it has?
A:
Not at all. If you combine common
styles together, then if they change, you
only have to change them in one rule. If you
break them up, then there are many rules
you have to change, which is error-prone.
Q:
Why do we use a bottom border to
underline text? Isn't there an underline
style for text?
A:
Good question. There is an underline
style for text and we could use that instead.
However, the two styles have slightly
different effects on the page: if you use
border-bottom, then the line will extend to the
edge of the page. An underline is only shown
under the text itself. The property to set text
underline is called text-decoration and has a
value of “underline” for underlined text. Give
it a try and check out the differences.
So, how do selectors really work?
You've seen how to select an element to style it, like this:
We
call this
the sele
ctor.
The st
yle is a
pplied
to the
elemen
ts
h1 {
color: gray;
}
descri
bed by
the se
lector—
in this
case, <
h1> ele
ments.
Or how to select more than one element, like this:
h1, h2 {
color: gray;
}
You're going to see that CSS allows you to specify all kinds of selectors that determine which elements
your styles are applied to. Knowing how to use these selectors is the first step in mastering CSS, and
to do that you need to understand the organization of the HTML that you're styling. After all, how
can you select elements for styling if you don't have a good mental picture of what elements are in the
HTML, and how they relate to one another?
So, let's get that picture of the lounge HTML in your head, and then we'll dive back into selectors.
