Text should have first letter in uppercase and remaining in lowercase for visualforce page

Question

Currently When text is entered in the "custom label" field it will be displayed on the Downloads(name of vf page) visualforce page in upper-case. But that should not be the case. It should start with UpperCase and remaining text should be in lowercase.

Current Scenario: GUIDE,
Expected Scenario: Guide

I am not sure how to do that...

Current VF Code snippet:

<apex:outputPanel rendered=" {!i.ABC_Url_Image_Url__c == 'n/a'}">
<a class="text-uppercase" href=" {!i.ABC_Url__c}"> {!i.ABC_Url_Text__c}
<span class="XYZ"></span>
</a>
</apex:outputPanel>

Answer 1

The following CSS would do this:

.text-title-case {
  text-transform: capitalize;
}