HTML and CSS Reference
In-Depth Information
What are we trying to do?
Let's take a quick look at what we're trying to do
to the heading colors.
What we have now
html
He
re's just the main
he
ading elements in the
lou
nge HTML.
body
h1
h2
div id="elixirs"
Ri
ght now, the CSS says t
o color <h1>
an
d <h2> element text aq
uamarine. So
all
<h1> and <h2> elements
are that
co
lor, even in the elixirs <d
iv>.
h2
h3
h3
h3
h1, h2 {
color: #007e7e;
And here's
the rule specifying the <
h1>
and <h2> c
olor in the “lounge.css” f
ile.
}
What we want
html
We wa
nt the <h1> and <h2> in
the m
ain page to stay aquamar
ine.
body
h1
h2
div id="elixirs"
h2
h3
h3
h3
And we wan
t to change the <h2>
and <h3> el
ements in the elixirs
section to b
e black and red.
h1, h2 {
But if we change the existing rule for <h2
>, we'll affect
the font color of every <h2> in the main p
age. And if we
add a new rule for <h3>, then any <h3>s th
at get added
to the main page later will be red, which is
not what we
want. Now, we could use a class like Jim sug
gested, but
we're going to give Frank's idea a try first…
color: #007e7e;
}
