Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the cases for a text in CSS?

Javascript Web Development Front End Scripts

The text-transform property in CSS allows you to control the capitalization of text without modifying the original HTML content. This property is particularly useful for styling headings, navigation links, and other text elements consistently across your website.

Syntax

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

Property Values

The text-transform property accepts the following values:

  • none - No transformation (default value)
  • capitalize - First letter of each word is capitalized
  • uppercase - All letters are converted to uppercase
  • lowercase - All letters are converted to lowercase

Example

Here's a complete example demonstrating all text-transform values:

<!DOCTYPE html>
<html>
<head>
    <style>
        .none { text-transform: none; }
        .capitalize { text-transform: capitalize; }
        .uppercase { text-transform: uppercase; }
        .lowercase { text-transform: lowercase; }
        p { margin: 10px 0; padding: 5px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <p class="none">
        this text has NO transformation applied
    </p>
    
    <p class="capitalize">
        this text will be capitalized
    </p>
    
    <p class="uppercase">
        this text will be in uppercase
    </p>
    
    <p class="lowercase">
        THIS TEXT WILL BE IN LOWERCASE
    </p>
</body>
</html>

Output

The above code will display:

this text has NO transformation applied

This Text Will Be Capitalized

THIS TEXT WILL BE IN UPPERCASE

this text will be in lowercase

Common Use Cases

Here are practical applications of the text-transform property:

<!DOCTYPE html>
<html>
<head>
    <style>
        .nav-link { text-transform: uppercase; }
        .title { text-transform: capitalize; }
        .code { text-transform: lowercase; }
    </style>
</head>
<body>
    <nav>
        <a href="#" class="nav-link">home</a>
        <a href="#" class="nav-link">about us</a>
        <a href="#" class="nav-link">contact</a>
    </nav>
    
    <h1 class="title">welcome to our website</h1>
    
    <code class="code">CONSOLE.LOG("Hello World");</code>
</body>
</html>

Key Points

  • The text-transform property only affects the visual display, not the actual HTML content
  • Screen readers and copy-paste operations will use the original text case
  • The capitalize value capitalizes every word, including articles and prepositions
  • This property is inherited by child elements unless overridden

Conclusion

The text-transform property provides a clean way to control text capitalization in CSS. Use uppercase for navigation links, capitalize for titles, and lowercase to normalize text input styling.

Updated on: 2026-03-15T23:18:59+05:30

262 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements