The font-style property is used to select between normal (upright) and italic or oblique font faces.

The font-style property contains following information:

  1. value: normal, italic, oblique or inherit;
  2. initial: normal;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified by the font family.

The appearance of italic and oblique faces highly depends on the normative within a browser and the generic names of the chosen font family, thus for instance a cursive type family is by default labeled as italic.

Example

CSS font-style property example:

​x
 
<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div#times { 
    font-family:"Times New Roman", serif;
    font-style:normal;
}
div#times p + p {
    font-style:italic;
}
div#times p + p + p {
    font-style:oblique;
}
div#verdana { 
    font-family:"Verdana", sans-serif;
    font-style:normal;
}
div#verdana p + p {
    font-style:italic;
}
div#verdana p + p + p {
    font-style:oblique;
}
</style>
</head>
<body>
​
<div id="times">
<p>Times New Roman with regular face</p>
<p>Times New Roman with italic face</p>
<p>Times New Roman with oblique face</p></div>
<div id="verdana">
<p>Verdana with regular face</p>
<p>Verdana with italic face</p>
<p>Verdana with oblique face</p></div>
​
</body>
</html>

 

›› go to examples ››