Text Transform Property in CSS

Submitted by argie on Tuesday, March 18, 2014 - 09:49.
Text transform property is supported in any kind of browser. The primary function of this property is it allows you to transform your text into none, uppercase, capitalize and lower case format. To understand what this four property are, follow the steps bellow.

Creating Our Display

The code Bellow will display the result of none, uppercase, capitalize and lower case format. Copy the code bellow and save it as “index.html”.
  1. <style>
  2. </style>
  3. <p id="none">Here's how you use None property in text-transform</p>
  4. <p id="uppercase">Here's how you use None property in text-transform</p>
  5. <p id="lowercase">Here's how you use None property in text-transform</p>
  6. <p id="capitalize">Here's how you use None property in text-transform</p>

None Format

The text remain as it is, no changes can be seen in the div that is using the “none” format. Copy the code bellow and paste it inside the style tag in our “index.html”.
  1. #none {
  2. text-transform : none;
  3. }

Uppercase Format

Transforms all characters to uppercase. All text in the div will be transformed into uppercase letter using the “uppercase” format. Copy the code bellow and paste it inside the style tag in our “index.html”.
  1. #uppercase {
  2. text-transform : uppercase;
  3. }

Lowercase Format

Transforms all characters to lowercase. All text on the div will transformed into lowercase letter using the “lowercase” format. Copy the code bellow and paste it inside the style tag in our “index.html”.
  1. #lowercase {
  2. text-transform : lowercase;
  3. }

Capitalize Format

Transforms the first character of each word to format. Copy the code bellow and paste it inside the style tag in our “index.html”.
  1. #capitalize {
  2. text-transform : capitalize;
  3. }

Summary of the code

  1. <style>
  2. #none {
  3. text-transform : none;
  4. }
  5. #uppercase {
  6. text-transform : uppercase;
  7. }
  8. #lowercase {
  9. text-transform : lowercase;
  10. }
  11. #capitalize {
  12. text-transform : capitalize;
  13. }
  14. </style>
  15. <p id="none">Here's how you use None property in text-transform</p>
  16. <p id="uppercase">Here's how you use None property in text-transform</p>
  17. <p id="lowercase">Here's how you use None property in text-transform</p>
  18. <p id="capitalize">Here's how you use None property in text-transform</p>
Make sure you follow all instruction to successfully run this tutorial.
Tags
text-transform property in css
text-transform property using css

Add new comment

About text formats
  • 27 views