CSS – capitalize all letters with first one bigger

Are you wondering how to turn all the text in an HTML element into uppercase AND make the first letter of each word a few % larger than the rest of the text?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p.upcase{
    text-transform:capitalize;
    font-variant:small-caps;     
    font-weight:bold; 
}
</style>
</head>

<body>
<p class="upcase">1. Check out this Text</p>
<p>2. Check out this Text</p>
</body>
</html>

Result

1. Check out this Text

2. Check out this Text

Leave a Reply