Manipulate Capitalization Using CSS’s Text-Transform

Have you ever wanted to change the case of a certain line or block of text on the website, but didn’t feel like re-writing all the copy? With CSS’s text-transform, you don’t have to. Text-transform is a useful little CSS property that can manipulate the capitalization and cases of any text in HTML tags. Here are the different values it takes:

  • lowercase: this transforms all the text into lowercase, meaning there’s no capital letters at all
  • capitalize: this capitalizes only the first letter of each word  (it’s useful to apply to tags that include peoples’ names, for example)
  • uppercase: this will change the case of every single letter to uppercase

To use text-transform, your CSS should look something like this:

  1. p.lowercase{
  2. text-transform: lowercase;
  3. }
  5. p.capitalize{
  6. text-transform: capitalize;
  7. }
  9. p.uppercase{
  10. text-transform: uppercase;
  11. }

Below you’ll find an example of some p tags before and after the text-transform property has been applied to them. Here’s the before:

Screen Shot 2016-06-16 at 3.11.36 PM

And the after:

Screen Shot 2016-06-16 at 3.11.25 PM





Share and Enjoy !

0 0