text transformation css code example

Example 1: css all caps

.uppercase {
  text-transform: uppercase;
}

#example {
  text-transform: none;	/* No capitalization, the text renders as it is (default) */
  text-transform: capitalize;	/* Transforms the first character of each word to uppercase */
  text-transform: uppercase;	/* Transforms all characters to uppercase */
  text-transform: lowercase;	/* Transforms all characters to lowercase */
  text-transform: initial;	/* Sets this property to its default value */
  text-transform: inherit;	/* Inherits this property from its parent element */
}

Example 2: html text transformation

<p style="text-transform: none;"> All letters will be displayed as entered by the developer. Default value </p>
<p style="text-transform: capitalize;"> All words will be capitalized </p>
<p style="text-transform: uppercase;"> All letters of all words will be in uppercase </p>
<p style="text-transform: lowercase;"> All letters of all words will be displayed in lowercase </p>

Example 3: text transform in css

/*HTMl*/
<p >Initial String
  <h2>Lorem ipsum dolor sit amet</h2>
</p>
<div class="heading">
  This will be capitalize
</div>

 /*CSS*/
.heading {
  text-transform: capitalize;
}
/*OTHER TEXT TRANSFORM*/ 
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kan