CssHow-ToBeginner · 3 min read

How to Make Text Capitalize in CSS: Simple Guide

To make text capitalize in CSS, use the text-transform: capitalize; property on the element. This changes the first letter of each word to uppercase while leaving the rest lowercase.

📐

Syntax

The CSS property to capitalize text is text-transform. You set it to capitalize to change the first letter of each word to uppercase.

Example parts:

selector: the HTML element you want to style.
text-transform: the CSS property controlling text case.
capitalize: the value that makes the first letter of each word uppercase.

css

selector {
  text-transform: capitalize;
}

💻

Example

This example shows how to capitalize the text inside a paragraph using CSS.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capitalize Text Example</title>
  <style>
    p {
      text-transform: capitalize;
      font-family: Arial, sans-serif;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <p>this is an example sentence to demonstrate capitalization.</p>
</body>
</html>

Output

This Is An Example Sentence To Demonstrate Capitalization.

⚠️

Common Pitfalls

Some common mistakes when using text-transform: capitalize; are:

Expecting it to capitalize the entire word (it only changes the first letter).
Using it on input fields without considering user input behavior.
Not realizing it only changes the display, not the actual text content.

Also, it does not work well with some languages or special characters.

css

/* Wrong: expecting full uppercase */
p {
  text-transform: capitalize;
  /* This will NOT make all letters uppercase */
}

/* Right: use uppercase for all caps */
p {
  text-transform: uppercase;
}

📊

Quick Reference

Here is a quick summary of text-transform values:

Value	Effect
none	No change to text case
capitalize	First letter of each word uppercase
uppercase	All letters uppercase
lowercase	All letters lowercase

✅

Key Takeaways

Use text-transform: capitalize; to make the first letter of each word uppercase.

It only changes how text looks, not the actual text content.

For full uppercase, use text-transform: uppercase; instead.

Be careful using it on user inputs as it only affects display.

Works best with simple Latin alphabets; may not behave as expected with special characters.