Pawan Sharma
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.
What is the text-transform Property?
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.
Values:
The text-transform property accepts the following values:
- none: No transformation is applied; the text remains in its original form.
- capitalize: Transforms the first character of each word to uppercase.
- uppercase: Transforms all characters to uppercase.
- lowercase: Transforms all characters to lowercase.
- full-width: Changes characters to full-width form (typically used in East Asian typography).
- inherit: Inherits the value of the text-transform property from its parent element.
- initial: Sets the property to its default value (none).
- unset: Resets the property to its natural state based on inheritance or default.
Using text-transform: none
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform None Example</title>
<style>
.uppercase {
text-transform: uppercase;
}
.no-transform {
text-transform: none;
}
</style>
</head>
<body>
<div class="uppercase">
<h1>This heading will be uppercase</h1>
<p>This paragraph will be uppercase as well.</p>
<p class="no-transform">This paragraph will not be transformed.</p>
</div>
</body>
</html>
Using text-transform: capitalize
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform Capitalize Example</title>
<style>
.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1 class="capitalize">this is a heading</h1>
<p class="capitalize">this paragraph will capitalize the first letter of each word.</p>
</body>
</html>
Using text-transform: uppercase
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform Uppercase Example</title>
<style>
.uppercase {
text-transform: uppercase;
}
</style>
</head>
<body>
<h1 class="uppercase">this is a heading</h1>
<p class="uppercase">this paragraph will be displayed in uppercase letters.</p>
</body>
</html>
Using text-transform: lowercase
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform Lowercase Example</title>
<style>
.lowercase {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1 class="lowercase">THIS IS A HEADING</h1>
<p class="lowercase">THIS PARAGRAPH WILL BE DISPLAYED IN LOWERCASE LETTERS.</p>
</body>
</html>
Using text-transform: full-width
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform Full-Width Example</title>
<style>
.full-width {
text-transform: full-width;
}
</style>
</head>
<body>
<h1 class="full-width">Hello, World!</h1>
<p class="full-width">This text will be displayed in full-width characters.</p>
</body>
</html>
Using text-transform: inherit
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform Inherit Example</title>
<style>
.parent {
text-transform: uppercase;
}
.child {
text-transform: inherit; /* This will inherit the uppercase transformation */
}
.override {
text-transform: none; /* This will override the inherited transformation */
}
</style>
</head>
<body>
<div class="parent">
<h1>This heading will be uppercase</h1>
<p class="child">This paragraph will also be uppercase because it inherits the transformation.</p>
<p class="override">This paragraph will not be transformed.</p>
</div>
</body>
</html>
Using text-transform: initial
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform Initial Example</title>
<style>
.uppercase {
text-transform: uppercase;
}
.initial {
text-transform: initial; /* This resets to the default value (none) */
}
</style>
</head>
<body>
<div class="uppercase">
<h1>This heading will be uppercase</h1>
<p>This paragraph will also be uppercase.</p>
<p class="initial">This paragraph will reset to its default casing.</p>
</div>
</body>
</html>
Using text-transform: unset
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.
HTML Example :
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transform Unset Example</title>
<style>
.uppercase {
text-transform: uppercase; /* Applies uppercase transformation */
}
.unset {
text-transform: unset; /* Resets the text-transform property */
}
</style>
</head>
<body>
<div class="uppercase">
<h1>This heading will be uppercase</h1>
<p>This paragraph will also be uppercase.</p>
<p class="unset">This paragraph will not be transformed.</p>
</div>
</body>
</html>
Conclusion
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.
%201.png?width=1016&height=912&name=image%20(54)%201.png)