text-transform - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-transform

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. text-transform

Description

The text-transform CSS property transforms the text case.

The following table summarizes the text-transform Property.

Item Value
Default value: none
Applies to:All elements
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


text-transform:     capitalize | lowercase | none | uppercase | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
capitalize Turn the first character of each word in uppercase.
lowercase Turn all characters into lowercase.
uppercase Turn all characters into uppercase.
none Default value. The text renders as it is.
initialSets this property to its default value.
inherittake the value of its parent element text-transform property.

The example below shows the text-transform property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS text-transform property</title>
  <style type="text/css">
    p.low {<!--  ww  w  .  j a v a  2 s. co  m-->
      text-transform: lowercase;
    }
    p.cap {
      text-transform: capitalize;
    }
    p.up {
      text-transform: uppercase;
    }
    </style>
 </head>
 <body>
  <h1>Text-transform Effect</h1>
  <p>This is a normal paragraph.</p>
  <p class="low">TEST.</p>
  <p class="cap">test.</p>
  <p class="up">test.</p>
 </body>
</html>

Related Tutorials