Menu
CSS

text-transform

The text-transform property in CSS is used to control the capitalization of text. It allows you to change the case of the text in an element without altering the HTML content itself. 

 

Here’s a quick guide to using it:

 

1. none:

 Keeps the text as it is, with no changes to the capitalization. it is useless sometime.

p {
    text-transform: none;
}

 

2. capitalize: 

Capitalizes the first letter of each word. 

p {
    text-transform: capitalize;
}

 

3. uppercase: 

Converts all letters in the text to uppercase.

p {
    text-transform: uppercase;
}

 

4. lowercase: 

Converts all letters in the text to lowercase. 

p {
    text-transform: lowercase;
}

 

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Transform Example</title>
    <style>
        .none {
            text-transform: none;
        }
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="none">codersmile.com </p>
    <p class="capitalize">codersmile.com </p>
    <p class="uppercase">codersmile.com </p>
    <p class="lowercase">CODERSMILE.COM</p>
</body>
</html>

 

CSS