CSS Text Transform

CSS text-transform property is used to change the case of a text. For example,

p {
    text-transform: capitalize;
}

Browser Output

CSS Text Transform Description

Here, capitalize is a value of the text-transform property that sets the initial character of each word into capital letters.


CSS Text Transform Syntax

The syntax of the text-transform property is,

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

Here,

  • none - doesn't change the text, default value
  • capitalize - sets the first character of each word to uppercase
  • uppercase - sets all characters in the uppercase
  • lowercase - sets all characters in the lowercase
  • initial - sets the text-transform to the default value
  • inherit - inherits the value from its parent

CSS text-transform Example

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS text-transform</title>
    </head>

    <body>
        <h4>text-transform : none</h4>
        <p class="none">The quick brown fox jumps over the lazy dog.</p>
        <h4>text-transform : capitalize</h4>
        <p class="capitalize">The quick brown fox jumps over the lazy dog.</p>
        <h4>text-transform : uppercase</h4>
        <p class="uppercase">The quick brown fox jumps over the lazy dog.</p>
        <h4>text-transform : lowercase</h4>
        <p class="lowercase">The quick brown fox jumps over the lazy dog.</p>
    </body>
</html>
/* doesn't transform the text */
p.none {
    text-transform: none;
}


p.capitalize {
    text-transform: capitalize;
}

/* transforms the text to uppercase */
p.uppercase {
    text-transform: uppercase;
}

/* transforms the text to lowercase */
p.lowercase {
    text-transform: lowercase;
}

Browser Output

CSS Text Transform Example Description

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges