How to Make Text Lowercase in HTML and CSS
In this tutorial, we will learn how to make text lowercase in HTML and CSS. You may need to define the style of a text while working on a website. You can display the text in initial capital letters, all in capital letters, or all in small letters.
By making use of the CSS text-transform property, we can easily lowercase all the letters in a text. This property can have three possible values; uppercase, lowercase, or capitalized. Depending upon the requirement, we can set the value to transform the text.
In the following example, we will transform all letters to lowercase. Please have a look over the code example and the steps given below.
HTML
- We have one h1 element with some text content.
- In the head element, we have added a stylesheet (style.css) using 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>Small letters</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>THIS IS HEADING ONE</h1>
</body>
</html>
CSS
We are selecting the h1 element and setting the value of the text-transform property to lowercase. As a result, all the text content in the h1 element will be transformed into lowercase.
h1 {
text-transform: lowercase;
}
