text-transform in CSS - Control Case, Style, and Weight

Sometimes you want English text in uppercase or lowercase, or you want to highlight a word with italics or bold. In CSS you can do that easily without changing the original HTML content.

This lesson is for anyone looking for text-transform in CSS, the difference between font-style and font-weight, or how to make text uppercase in CSS.

What Is text-transform in CSS?

The text-transform property controls letter case for languages that have upper/lowercase, such as English.

• uppercase: all letters are uppercase.
• lowercase: all letters are lowercase.
• capitalize: the first letter of each word is uppercase.

Important note: text-transform does not affect Arabic because Arabic has no uppercase/lowercase system.

Using text-transform in CSS

.up {
    text-transform: uppercase;
}

.low {
    text-transform: lowercase;
}

.cap {
    text-transform: capitalize;
}

What does this code do? It applies three different casing styles to English text.

Line by line:

• uppercase: all text in uppercase.
• lowercase: all text in lowercase.
• capitalize: first letter of each word uppercase.

Expected result: a visual change without modifying the original HTML text.

Common mistake: expecting it to work the same way with Arabic words.

What Is font-style in CSS?

The font-style property controls the style of the font, and is commonly used for italic text.

• normal: the default style.
• italic: italic text.

p.quote {
    font-style: italic;
}

What does this code do? It makes the paragraph with class quote italic, which is useful for quotes.

Expected result: clear visual emphasis on important text or quotations.

Common mistake: overusing italics in long paragraphs, which hurts readability.

What Is font-weight in CSS?

The font-weight property controls the thickness of the font.

• normal or 400: normal weight.
• bold or 700: bold weight.
• Numeric values from 100 to 900 depending on the font.

h2 {
    font-weight: 700;
}

small {
    font-weight: 300;
}

What does this code do? It makes headings bold and smaller text lighter.

Expected result: a clear visual hierarchy between headings and secondary text.

Common mistake: using weights not supported by the current font, so you see no real difference.

Complete Practical Example in CSS

HTML:

<h2 class="title">web design basics</h2>
<p class="quote">good design is clear design</p>
<p class="note">important note</p>

CSS:

.title {
    text-transform: uppercase;
    font-weight: 700;
}

.quote {
    font-style: italic;
    text-transform: capitalize;
}

.note {
    font-weight: 300;
    text-transform: lowercase;
}

What does this example do? It combines letter case, style, and weight to create a clear visual hierarchy.

Expected result: a bold title, an italic quote, and a lighter note.

Common mistake: applying all effects to all text at once, which makes the design unbalanced.

Common Mistakes with text-transform, font-style, and font-weight

1) Using uppercase on large blocks of text: hurts readability in long paragraphs.

2) Relying on italics for all emphasis: can be hard on the eyes.

3) Unavailable weights: some fonts do not support all numeric weights.

FAQ - Common Search Questions

How do I convert text to uppercase in CSS?

Use text-transform: uppercase; on the target element.

What is the difference between capitalize and uppercase in CSS?

uppercase makes all letters uppercase, while capitalize makes only the first letter of each word uppercase.

Does text-transform work with Arabic?

No, it mainly affects languages with upper/lower case such as English.

How do I make text bold in CSS?

Use font-weight: bold; or a numeric value like 700.

When should I use font-style: italic in CSS?

For quotes or short notes, not for long paragraphs.