CSS – capitalize all letters with first one bigger

Posted on by

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