How do I use the font-style property?
Author: Deron Eriksson
Description: This CSS tutorial describes how to use the font-style property.
Tutorial created using: Windows XP


The font-style property can have four possible values: normal, italic, oblique, and inherit. The 'normal' value represents the standard, upright face of a font. The 'italic' value represents the slanted, italic face of a font. The 'oblique' value represents a slanted version of the font, but this can be either the italic face or a slanted version of the normal font face. In general, 'italic' is used more often than 'oblique', and I use 'italic'. The 'inherit' value refers to inheriting the value of the font-style from the parent element.

The possible values of the font-style property are demonstrated below in the style-test.html file.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
.one { font-style: normal; }
.two { font-style: italic; }
.three { font-style: oblique; }
.four { font-style: inherit; }
</style>
</head>
<body>
<div class="one">font-style: normal;</div>
<div class="two">font-style: italic;</div>
<div class="three">font-style: oblique;</div>
<div class="four">font-style: inherit;</div>
</body>
</html>

The display of style-test.html in IE7 is shown below:

font-style example