UsableTypeTypography for the World Wide Web

style guide

Text Transform

Using the text-transform property it is possible to change text specified in the source to different variations of uppercase and lowercase letters.

The initial value of none leaves the text exactly as written in the source, and no change is made to uppercase or lowercase letters.

The value uppercase changes all characters to uppercase letters no matter how they are written in the source, and the value lowercase changes all characters to lowercase letters.

The value capitalize transforms the first letter of every word into uppercase, and leaves all other letters as they are declared in the source.

Here are the effect of these different values on one element:

<p>here iS an Element that is StYled diFFerently each time. notice the effecTs?</p>

p {text-transform:uppercase;}

here iS an Element that is StYled diFFerently each time. notice the effecTs?

p {text-transform:lowercase;}

here iS an Element that is StYled diFFerently each time. notice the effecTs?

p {text-transform:capitalize;}

here iS an Element that is StYled diFFerently each time. notice the effecTs?

p {text-transform:none;}

here iS an Element that is StYled diFFerently each time. notice the effecTs?

text-transform
Values: capitalize | uppercase | lowercase | none | inherit
Initial Value: none
Applies to: all elements
Inherited: yes
Percentages: N/A

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close