How to set the variant of a font using CSS
The font-variant property can have one of two values: normal or small-caps.
The font-variant property with a small-caps value causes all letters to be displayed in uppercase, however, lowercase letters in the text will displayed slightly scaled down compared to the uppercase letters.
The code below shows you how to set the variant of a font using CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web Development Tutorials.com</title>
<style type="text/css">
p.one
{ font-variant: normal; }
p.two
{ font-variant: small-caps; }
</style>
</head>
<body>
<p class="one">
This Is A Paragraph With A font-variant Value Of normal.
</p>
<p class="two">
This Is A Paragraph With A font-variant Value Of small-caps.
</p>
</body>
</html>
The code above creates the paragraphs below.
This Is A Paragraph With A font-variant Value Of normal.
This Is A Paragraph With A font-variant Value Of small-caps.
Note: all of the letters in the bottom paragraph are made uppercase, however, notice that the letters that are lowercase in the code are displayed slightly scaled down compared to the letters that are uppercase in the code.
Use the text editor below to practice what you have learned.