html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS font-style property

Definition

The CSS font-style property allows us to vary the style of the text on our web pages.

Applies To

All elements.

Property Values

inherit - The font style properties are inherited from the parent element.

italic - The font style is italicized.

normal - The font style is set to normal (default).

oblique - The font style is obliqued.

Default Value

Default value of font-style is set to normal.

Inheritance

The font-style property is inherited from the parent element if none is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS font-style property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS font-style Property</title>

<!-- Valid values for CSS font-style Property are:
	
	inherit, italic, normal and oblique. 
	
--> 

<style type="text/css">

/* Body font style set to italics to show inheritance */
body {
  font-style: italic;
}

/* h1 headings font style set to oblique */
h1 {
  font-style: oblique;
}

/* h2 headings font style set to normal */
h2 {
  font-style: normal;
}

/* Paragraph font style set to inherit (inherits from parent element) */
p {
  font-style: inherit;
}

</style>

</head>
<body>
<h1>H1 Headings Set To Oblique</h1>
<h2>H2 Headings Have A Font Style Set To Normal</h2>
<p>Paragraph Font Style Will Inherit From The Body On This Occasion. 
   The body font size has been set to italic.</p>
</body>
</html>

How It Looks

The results of using the font-style property with the values above will look something like the following:

notepad
CSS font-size    << Prev          Next >>   CSS font-variant

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.