The text-transform property in CSS allows you to control the capitalization of text elements without altering the original HTML content. This property is particularly useful when styling headers, buttons, or any text-based elements that require consistent formatting.
In this guide, we’ll cover everything you need to know about the text-transform property, including its values and practical examples.
The text-transform property in CSS is used to specify how text is capitalized. You can use it to transform text to uppercase, lowercase, capitalize the first letter of each word, or leave it unchanged.
The text-transform property accepts the following values:
The text-transform: none value ensures that no transformation is applied to the text. It leaves the text exactly as it is written in the HTML, overriding any inherited transformations like uppercase or capitalize.
This paragraph will be uppercase as well.
This paragraph will not be transformed.
The text-transform: capitalize property makes the text look like a title, where every word starts with an uppercase letter, regardless of how it was written in the HTML.
this paragraph will capitalize the first letter of each word.
The text-transform: uppercase property in CSS converts all the letters of the selected text to uppercase. This transformation happens purely at the styling level, meaning it doesn’t change the actual content in the HTML but just alters the way it's displayed on the web page.
This property is commonly used for headings, buttons, or navigational elements where consistent uppercase text is desired for a bold and attention-grabbing appearance.
this paragraph will be displayed in uppercase letters.
The text-transform: lowercase property in CSS converts all the letters in the selected text to lowercase. Like other values of the text-transform property, it changes the visual representation of the text without altering the actual content in the HTML.
This property is useful when you want to ensure that all text appears in lowercase, which can be applied to user inputs, messages, or design elements that require a uniform lowercase style.
THIS PARAGRAPH WILL BE DISPLAYED IN LOWERCASE LETTERS.
The text-transform: full-width property in CSS is used to convert characters into their full-width form. This is particularly useful in East Asian typography (e.g., Chinese, Japanese, Korean), where full-width characters occupy more space compared to their standard half-width counterparts. Full-width characters are spaced more evenly in a layout, creating a uniform and aesthetically pleasing design, especially when working with non-Latin characters.
Note: The full-width value mostly affects typographic systems that support this transformation, and you may not see an obvious change with standard Latin characters.
This text will be displayed in full-width characters.
The text-transform: inherit property in CSS allows an element to inherit the text transformation styles applied to its parent element. This means that if a parent element has a specific text-transform value (like uppercase, lowercase, capitalize, or none), the child element will automatically adopt that value unless explicitly overridden.
Using inherit can help maintain consistent text styling throughout a webpage, especially when dealing with nested elements.
This paragraph will also be uppercase because it inherits the transformation.
This paragraph will not be transformed.
The text-transform: initial property in CSS sets the text transformation of an element to its default value, which is typically none. This means that it will not apply any uppercase, lowercase, or capitalization transformations, and the text will display as it is originally defined in the HTML.
Using initial can be helpful when you want to reset any previously applied styles to ensure that an element's text displays in its natural form.
This paragraph will also be uppercase.
This paragraph will reset to its default casing.
The text-transform: unset property in CSS is used to reset the text-transform property to its natural value based on the element’s context. This means it will revert to inherit if the element is inheriting styles from its parent or to initial (which is usually none) if it is not inheriting. The unset value is particularly useful when you want to remove any transformations that may have been applied to an element while still allowing for flexibility in inheriting styles.
This paragraph will also be uppercase.
This paragraph will not be transformed.
The text-transform property is a simple yet powerful tool for controlling text capitalization in your web designs. Whether you're styling headings, paragraphs, or navigation elements, mastering this property can greatly enhance the presentation of your text.
By understanding its various values and combining them with other CSS properties, you can ensure that your typography aligns perfectly with your design goals.