Making Text Italic

Two kinds of styled text that are often confused are italic and oblique. 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, on the other hand, is simply a font that is slanted to the right by the computer.

Using the font-style element (Table 3.7), 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 (Figure 3.7).

Table 3.7. Font-Style Values




IE3, FF1, S1, O3.5, CSS1


IE3, FF1, S1, O3.5, CSS1


IE4, N6, S1, O3.5, CSS1

Figure 3.7. Italic or oblique? To really tell the difference, take a careful look at the letter "i" in both words.

In this example (Figure 3.8), the h1 and h2 tags use the same serif font, but H1 is italic and h2 is oblique. Notice however, that they look the same. In reality, most browsers do not differentiate between the two values, generally using the italic version of the font for both if it is available.

Figure 3.8. Book titles and quotes are generally italicized to set them off. Notice that serif fonts are truly italic, while sans-serif fonts are oblique, regardless of whether you set italic or oblique.

To set font-style in an HTML tag:



Type the property name font-style (Code 3.3), followed by a colon (:).

Code 3.3. The level 1 heading is italicized, while the level 2 heading is oblique. However, notice that they still look the same.

[View full width]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " /xhtml1-strict.dtd">  <html xmlns="">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>CSS, DHTML &amp; Ajax | Making Text Italic</title>  <style type="text/css" media="all">  body {       font-size: 1.2em;       font-family: Georgia, "Times New Roman", times, serif;       font-style: normal; }  h1 {       font-style: italic; }  h2 {       font-style: oblique; }  p.copy {       font-family: arial,helvetica,serif;       font-style: italic; }  .author {       font-family: arial,helvetica,serif;       font-style: oblique; }  </style>  </head>  <body>  <div >       <h1>Alice's Adventures in Wonderland</h1>       <p >Lewis Carroll</p>       <h2>CHAPTER III<br />       A Caucus-Race and a Long Tale</h2>  </div>  <p>They were indeed a queer-looking party that assembled on the bank--the birds with  draggled feathers, the animals with their fur clinging close to them, and all dripping wet,  cross, and uncomfortable.</p>  <p >The first question of course was, how to get dry again: they had a  consultation about this, and after a few minutes it seemed quite natural to Alice to find  herself talking familiarly with them...</p>  <p>At last the Mouse, who seemed to be a person of authority among them, called out...</p>  </body></html>



Type a value for the font-style. Your options are:

  • 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


  • Many browsers do not differentiate between italic and oblique, but will simply treat all serif fonts as italic, even when they are set to oblique. For example, with the class obliqueText, the Times New Roman font is still rendered as italic, even though it is set for oblique.

  • Many Web designers underline words to draw visual attention to them. I recommend using italic or oblique text instead. Underlining often causes the page to look cluttered. More important, underlined text might be confused with hypertext links.

  • Italicized text generally fits into a more compact space than does non-italic text (called roman in traditional typesetting terms) and could be used to save screen space. But be carefulat small point sizes, italic can be difficult to read on the screen.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230 © 2008-2017.
If you may any questions please contact us: