66
getting started with css
you are here
�
297
So, how do selections really work?
h1 {
color: gray;
}
You’ve seen how to select an element to style it, like this:
Or, how to select more than one element, like this:
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 XHTML 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
XHTML, and how they relate to one another?
So, let’s get that picture of the Lounge XHTML in your head, and then we’ll dive back into selectors.
h1, h2 {
color: gray;
}
We call this the selector.
Another selector. The style is applied to <h1> and <h2> elements.
The style is applied to the elements
described by the selector - in this
case, <h1> elements.
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.
there are no
Dumb Questions
