CSS Text Transform

The text-transform changes the casing style for a section of text.

       p-none {
		  text-transform: none;
       p-caps {
		  text-transform: capitalize;
       p-upper {
		  text-transform: uppercase;
       p-lower {
		  text-transform: lowercase;

Text Transform Examples

Style Display
<span class="p-caps">coding tools for all</span> coding tools for all
<span class="p-upper">coding TOOLS for All</span> coding TOOLS for All
<span class="p-lower">coding TOOLS for All</span> coding TOOLS for All

The main text-transform you will use

  • none: Defines normal text, with lower case letters and capital letters
  • capitalize: Each word in a text starts with a capital letter
  • uppercase: Defines only capital letters
  • lowercase: Defines no capital letters, only lower case letters