Font styling

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

The font-style property contains following information:

value: normal, italic, oblique or inherit;
initial: normal;
applies to: all elements;
inherited: yes;
percentages: N/A;
media: visual;
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:

<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 ››

Example

CSS font-style property example:

Comments

About

Contact

Get Connected