This chapter is from the book
This chapter is from the book
This chapter is from the book
Making Text Italic
The two kinds of styled text—italic and oblique Sare often confused. An italic font is a special version of a particular font, redesigned with more pronounced serifs and usually a slight slant to the right. An oblique font is simply a font that is slanted to the right by the computer ( Figure 3.7 ).
)
Figure 3.7 Italic or oblique? To really tell the difference, take a careful look at the letter "i" in both words.
With the font-style element, you can define a font as italic, oblique, or normal. When a font is set to italic but does not have an explicit italic version, the font defaults to oblique.
In this example (Code 3.3 and Figure 3.8 ), the class booktitle and any paragraphs within a <blockquote> are italicized. The title uses a serif font, so it shows the true italics, while the blockquote is using a sans-serif font, which is actually oblique, even when defined as italics.
Example 3.3. The booktitle class and <blockquote> tags will be italicized.
<html>
<head>
<style type="text/css"><!--
.booktitle {
font-family: 'times new roman',
times, serif;
font-style: italic;
}
blockquote {
font-family: arial, helvetica, serif;
font-style: italic;
}
--></style>
</head>
<body>
<h1 class="booktitle">Alice in Wonderland
</h1>
<p><i>How doth the little--</i>"' and
she crossed her hands on her lap...</p>
<blockquote>
<p>'How doth the little crocodile</p>
<p>Improve his shining tail,</p>
</blockquote>
</body>
</html>
)
Figure 3.8 Book titles and quotes are generally italicized to set them off.
To set font-style in an HTML tag:
- font-style: Type the property name font-style, followed by a colon (:).
-
italic;
Type a value for the font-style. Your options are (Table 3.6)
- italic, which displays the type in an italic version of the font
- oblique, which slants the text to the right
- normal, which overrides any other styles set
Table 3.6. font-style Values
Value
Compatibility
normal
IE4, N4, S1, O3.5, CSS1
italic
IE4, N4, S1, O3.5, CSS1
oblique
IE4, N6, S1, O3.5, CSS1