HTML and CSS Reference
In-Depth Information
We're almost there…
We're close to having the elixirs done. What's left?
First, we're going to change the width of the elixirs
<div>
to
make it narrower.
Next, we'll knock out some of the styles you're already familiar
with, like padding, text alignment, and the background image.
We
're on
the
last st
ep.
Then all we've got left are the text line heights and the heading
colors. You're going to see that you need to upgrade your CSS
selector skills just a bit to get those changed.
Sounds pretty easy, right? After all, you've done
all this before. In fact, given that you know you
can just set styles on the
<div>
and they will be
inherited, you can take care of this real fast.
We've almost got this done; we
just need to change the header
colors and also the line height.
Frank:
Yeah, this is interesting. The main elixirs heading, which is an
<h2>
,
has the aquamarine color because there is already an
<h2>
rule in the CSS.
But we need for that to be black. Then we've got the
<h3>
s in the elixirs,
which need to be red.
Jim:
Yeah, no problem, we'll just add a few more rules.
Frank:
But wait a sec…if we change the
<h2>
rule, or add an
<h3>
rule,
then we're going to change the heading colors on the entire page. We just
want these colors in the elixirs section.
Jim:
Oh, good point. Hmmm…Well, we could use two classes.
Frank:
That would work, although it's a bit messy. Anytime you
add a new heading to the elixirs
<div>
, you'll have to remember to
add it to the class.
Jim:
Yeah, well, c'est la vie.
Frank:
Actually Jim, before you use classes, go check out descendant
selectors. I think they'll work better here.
Jim:
Descendant selectors?
Frank:
Right, they're just a way of specifying a selector like “select an
<h2>
element, but only if it's inside an elixirs
<div>
.”
Joe:
I'm not following.
Frank:
Okay, let's step through this…
