Home

How to Upper Case / Lower Case / Capitalize Text in CSS?

Printer-friendly versionPrinter-friendly versionSend to friendSend to friendPDF versionPDF version

You can convert the appearance of text in a defined block of HTML using pure CSS, without the need of manual character replacement.

You can capitalize words, title case words or lowercase words in a block or div using pure CSS. Do do this simply use the following statement in your CSS style definition file:


/* Upper Case */
text-transform: uppercase;


/* Title Case */
text-transform: capitalize;


/* Lower Case */
text-transform: lowercase;

Listed in

User comments on this frequently asked question:

Submitted by greg (not verified) on September 8, 2011 - 13:41.

Great way to titlecase your text whenever you need it without hard coding it!

Submitted by Guest (not verified) on September 8, 2011 - 10:10.

Text transformation without JavaScript? This one is fantastic. Thank you!

Submitted by Andy (not verified) on September 8, 2011 - 05:04.

I didn't know you can titlecase words in pure CSS without actually replacing letters. Nice tip.