In this tutorial, we will learn how to make all letters capital in HTML and CSS. When we are working on a website or a project, we may want to use uppercase text for various reasons such as for an abbreviation, text, or heading.
There are multiple ways to capitalize the letters, but by making use of the CSS
text-transform property, we can easily capitalize the letters. This property can have three possible values; uppercase, lowercase, or capitalized. Depending upon the set value, the text will be transformed.
In the following example, we will make all letters capital of the text within the h1 element. Please have a look over the code example and the steps given below.
- We have one
h1 element with some text content.
- In the head element, we have added a stylesheet
style.css using the link element.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
We are selecting the
h1 element and setting the value of the
text-transform property to uppercase. As a result, all the text content in the h1 element will be transformed into uppercase.