Skip to main content
X

Explore your training options in 10 minutes

CSS All Caps: A Step-By-Step Guide

Christina Kopecky - December 29, 2020


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

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.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content