How to control the case of characters using CSS?

How are you controlling the case of the characters in your project. Talking about me, I was using ucwords() function of PHP to control the case of the characters when required. Today, I come to know two new property of CSS which controls the output of the case of the characters of the words.

You can control the characters using “text-transform” and “font-variant” property of the CSS to do this. You can change the characters of words to upper case, lower case and capitalize the first character of the word.Furthermore, you can use “font-variant” to display the font in small caps font i.e. all the lower case characters are converted into uppercase character but have small font size compared to text with character capitalized. Let’s see example,

Example of using text-transform and font-variant

<span style="text-transform: capitalize">bill gates</span> => bill gates
<span style="text-transform:lowercase">Bill Gates</span> =>  Bill Gates
<span style="text-transform: uppercase">bill gates</span> => bill gates
<span style="font-variant:small-caps">Bill Gates</span> => Bill Gates

As you can see clearly in the example how the character of case is changed using text-transform and font-variant property of CSS. I hope these property might be useful for those people who didn’t know about these properties. But “text-transform” should have had one more attribute to capitalize the first character of sentence, I’m missing that .