How to Make All Letters Capital in HTML and CSS
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.
HTML
- We have one
h1element with some text content. - In the head element, we have added a stylesheet
style.cssusing the link element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uppercase letters</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>html tutorial</h1>
</body>
</html>
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.
h1{
text-transform: uppercase;
}
