How to convert UPPERCASE text to Title Case using CSS

To some degree you can achieve this with CSS using the pseudo class ::first-letter and should work all the way back to IE 5.5 :-(

NOTE: this is very dependent on your html structure, and will not work in all cases, but can be useful from time to time. Hit "run code snippet" to the see the result below.

.progTitle {
    text-transform: lowercase;
}

.progTitle::first-letter {
    text-transform: uppercase;
}

<p class="progTitle">THIS IS SOME TEST TEXT IN UPPERCASE THAT WILL WORK. </p>
<p class="progTitle">this is some test text in lowercase that will work. </p>
<p class="progTitle"><i class="fa fa-bars"></i> THIS WILL NOT WORK </p>

The bad news is that there is no such thing as text-transform : title-case which would guarantee the result to be title cased. The good news is that there IS a way to do it, which doesn't require javascript (as is often suggested for this situation). If you are writing a theme for a CMS you can use strtolower() and ucwords() to convert the relevant text to title case.

BEFORE (THIS DOESN'T WORK):

<style>
.title-case{ text-transform:capitalize; }
</style>
<span class="title-case">ORIGINAL TEXT</span>

AFTER:

<?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>

If you are writing a theme, you'll probably be working with variables instead of text strings, but the function and the concept work the same way. Here's an example using the native Wordpress function get_the_title() to return the page title as a variable:

<?php
$title = get_the_title();
$title = strtolower($title);
$title = ucwords($title); 
<h1>
<?php echo $title;
</h1> 
?>

Hope this helps someone. Happy coding.