CSS
handbook

text-transform

lets take a look at the text-transform property

text-transform is the CSS property that we use to specify the letter capitalization of our text.

taught by Tina May

we can use text-transform to change all letters into uppercase

We can transform all letters in a text element into uppercase.

text-transform:

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

we can use text-transform to change all letters into lowercase

We can transform all letters in a text element into lowercase.

text-transform:

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

we can use text-transform to capitalize the first letter of each word

We can transform the first letter of each word into uppercase, while the rest of them become lowercase.

text-transform:

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML 

<div>
  <h2>Oh hey guys!</h2>
  <p>What's brewing, good looking?</p>
</div>

Oh hey guys!

What's brewing, good looking?

CSS

h2 { text-transform: uppercase; }

p { text-transform: capitalize; }

reults

Try changing the letter capitalization of both the heading and the paragraph we’ve added below.

You can change them into all uppercase, all lowercase, or just having the first letter as uppercase followed by lowercase letters.

Try these:

Copyright 2023