HTML and CSS Reference
In-Depth Information
Styling Tony's quotes
with a little italic
Now we're going to use the
font-style
property
to add a little pizzazz to Tony's quotes. Remember
the Burma Shave slogan in the
<blockquote>
element? We're going to change the slogan to italic
style to set it off from the rest of the text. To do
that, we just need to style the
<blockquote>
with a
font-style
of italic, like this:
blockquote {
font-style: italic;
}
Add this new CSS rule to the CSS in your
“journal.css” file, save it, and give the page a
test drive. You should see the Burma Shave
slogan change to italic; here's our test drive.
Q:
The text for the <blockquote> is actually inside
a <p> that's inside the <blockquote>. So, how did this
change the paragraph to italic?
A:
Remember, by default most elements get their font
styles from their parents, and the parent of this paragraph
is the <blockquote> element. So the paragraph within the
<blockquote> inherits the italic style.
Q:
Why didn't we just put the text into an <em>
element inside the <blockquote>? Wouldn't that do the
same thing and make the <blockquote> italic?
A:
Remember that <em> is for specifying structure. <em>
says that a set of words should be emphasized. What we're
doing is styling a <blockquote>, we are not indicating that the
text in the <blockquote> should be emphasized. So, while
you're right, on most browsers <em> is styled with italic, it's
not the right way to style the text in the <blockquote>. Also,
keep in mind that the style of <em> could change, so you
shouldn't count on <em> always being italic.
Here's the new style on the Burma Shave
slogan in Tony's page. We got slanted text,
just like we wanted.
