CssHow-ToBeginner · 3 min read

How to Make Text Lowercase in CSS: Simple Guide

To make text lowercase in CSS, use the text-transform property with the value lowercase. For example, text-transform: lowercase; changes all letters in the selected element to lowercase.

📐

Syntax

The CSS property text-transform controls the capitalization of text. Setting it to lowercase converts all letters to small letters.

text-transform: The property name.
lowercase: The value that makes text all lowercase.

css

selector {
  text-transform: lowercase;
}

💻

Example

This example shows a heading and paragraph with uppercase letters converted to lowercase using text-transform: lowercase;.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lowercase Text Example</title>
<style>
h1 {
  text-transform: lowercase;
  font-family: Arial, sans-serif;
  font-size: 2rem;
}
p {
  text-transform: lowercase;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
}
</style>
</head>
<body>
<h1>THIS IS A HEADING</h1>
<p>This Paragraph Has Mixed CASE Letters.</p>
</body>
</html>

Output

this is a heading this paragraph has mixed case letters.

⚠️

Common Pitfalls

One common mistake is confusing text-transform: lowercase; with other CSS properties like font-variant or trying to change text case with JavaScript when CSS can do it simply.

Also, text-transform only changes how text looks on screen; it does not change the actual text content in the HTML.

css

/* Wrong way: Trying to use font-variant for lowercase */
p {
  font-variant: lowercase; /* This does nothing */
}

/* Right way: Use text-transform */
p {
  text-transform: lowercase;
}

📊

Quick Reference

Here is a quick summary of text-transform values related to text case:

Value	Effect
none	No change to text case
lowercase	Converts all letters to lowercase
uppercase	Converts all letters to uppercase
capitalize	Capitalizes the first letter of each word

✅

Key Takeaways

Use text-transform: lowercase; to make text appear in lowercase.

text-transform changes only the display, not the actual HTML text content.

Common mistakes include confusing text-transform with other CSS properties.

You can apply text-transform to any text element like headings, paragraphs, or spans.

Remember to use semantic HTML and CSS for accessibility and clarity.