The text-transform: uppercase CSS property sets the contents of a text element to all caps. You can also use this property to set the contents of a text element to lowercase or title case. text-transform can apply to paragraphs, headings, or any other text element.
When writing and developing a website, developers can use CSS properties to adjust the case of a text font if they need to. Two ways that we will talk about in this article are by using text-transform and by using font-variant. Let’s take a look at the syntax of both.
CSS All Caps
You can change the contents of a text element to all caps using the CSS text-transform property. This property sets how text is capitalized on a web page. You can also use this property to set the contents of a text element to lowercase.
To make a block of text have all capital letters, use text-transform: uppercase in your CSS selector:
text-transform: uppercase;
The text-transform property accepts three possible values:
- uppercase: Sets each word to uppercase in a text element.
- lowercase: Sets text to lowercase.
- capitalize: Capitalizes each word, also known as title case.
Let’s take a look at an example of the text-transform method in action.
All Caps CSS Example
We’re going to build a web page that displays “This page does not exist.” in all capital letters.
To do this, we could type all of our letters in uppercase. The downside of this approach is that we would have to manually rewrite our text. This is not a problem for such a short sentence. But, changing letters manually would grow increasingly troublesome if you were changing the case of a longer string of text.
We’re going to use the text-transform method to be on the safe side.
Let’s define a HTML document with our text and the text-transform rule:
<html>
<head>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>this is in all caps</p>
</body>
</html>All the letters in the selected text appear in uppercase.
First, we define a <head> tag. This tag includes a <style> tag. We use this style tag to add our text-transform rule to the page. We could use an external CSS style sheet but because this example is so short we do not necessarily need one.
In the <body> tag, we define a paragraph. This paragraph will appear in all capital letters even though we wrote the sentence in sentence case. We know this because the text-transform property applies to all HTML <p> tags on our web page.
A Word on font-variant: small-caps;
If you want the characteristics of the title case but also use lowercase, you can use font-variant: smallcaps. Title case refers to a sentence where the first letter of each word appears in capital letters.
Here is an example of the font-variant rule in action:
<head>
<style>
p {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>this is in all caps</p>
</body>
</html>Conclusion
The text-transform property gives us the option to make all text in the element uppercase. The font-variant property gives us the option to make all small case text appear uppercase with the letter height of the small case letters.
These rules two more tools in your tool box for formatting text in HTML.
Do you want to learn more about coding in HTML? Read our How to Learn HTML guide. You’ll find advice on top courses, books, and learning resources, as well as tips on how to continue your learning journey.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
