CSS Property: text-transform

The text-transform property controls the use of uppercase and lowercase letters in text. It enables different text transformation methods:

none - text remains unchanged
uppercase - converts all letters to uppercase
lowercase - converts all letters to lowercase
capitalize - converts the first letter of each word to uppercase
full-width - converts characters to wider versions (mainly for Asian typography)
full-size-kana - converts all kana characters to full-size (for Japanese typography)

This property is particularly useful for styling headings, navigation menus, and emphasizing text without modifying the source HTML code.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-transform</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        .container {
            max-width: 100%;
            color: #333333;
            margin: 20px auto;
            padding: 20px;
        }
        .example {
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 15px;
            padding: 20px;
        }
        .example p {
            font-size: 18px;
            margin: 10px 0;
            padding: 10px;
            background: white;
            border-radius: 4px;
            border-left: 4px solid #3498db;
        }
        .code {
            font-family: monospace;
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }
        p.none {
            text-transform: none;
        }
        p.uppercase {
            text-transform: uppercase;
        }
        p.lowercase {
            text-transform: lowercase;
        }
        p.capitalize {
            text-transform: capitalize;
        }
        p.full-width {
            text-transform: full-width;
        }
        p.full-size-kana {
            text-transform: full-size-kana;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="example">
            <p class="none">Example of regular text without transformation.</p>
            <div class="code">text-transform: none;</div>
        </div>

        <div class="example">
            <p class="uppercase">This text will be displayed in uppercase.</p>
            <div class="code">text-transform: uppercase;</div>
        </div>

        <div class="example">
            <p class="lowercase">THIS TEXT WILL BE DISPLAYED IN LOWERCASE.</p>
            <div class="code">text-transform: lowercase;</div>
        </div>

        <div class="example">
            <p class="capitalize">each word will start with a capital letter.</p>
            <div class="code">text-transform: capitalize;</div>
        </div>

        <div class="example">
            <p class="full-width">Text in full width format</p>
            <div class="code">text-transform: full-width;</div>
        </div>

        <div class="example">
            <p class="full-size-kana">ｆｕｌｌ-ｓｉｚｅ-ｋａｎａ てすと</p>
            <div class="code">text-transform: full-size-kana;</div>
        </div>
    </div>
</body>
</html>

RESULT