🎯 CSS text-transform Property (Text Case Conversion)

The text-transform property in CSS is used to change the case of text automatically.

It allows you to convert text into uppercase, lowercase, or capitalized format without modifying the original HTML content.

This is especially useful for headings, buttons, menus, and UI consistency.

The text-transform property helps maintain consistent typography across a website.

Instead of editing text manually, CSS handles the formatting automatically.

text-transform: uppercase;
                

➡️ This converts all letters into uppercase format.

<p style="text-transform: none;">
    Hello World!
</p>
                

➡️ Text remains unchanged.

<p style="text-transform: capitalize;">
    hello world from css
</p>
                

➡️ Each word starts with a capital letter.

<p style="text-transform: uppercase;">
    css text transform
</p>
                

➡️ Converts all text to uppercase letters.

<p style="text-transform: lowercase;">
    HELLO CSS WORLD
</p>
                

➡️ Converts all text to lowercase letters.

<p style="text-transform: initial;">
    HeLLo WorLD
</p>
                

➡️ Resets to default browser behavior.

<div style="text-transform: uppercase;">
    <p style="text-transform: inherit;">hello world</p>
</div>
                

➡️ The paragraph inherits uppercase styling from its parent.