Syntax
text-transform: { capitalize | lowercase | none | uppercase | inherit } ;
Description
This property controls if and how an element’s text content is capitalized.
Example
These style rules makeh1 headings use only uppercase letters, while the first
letter of each word in h2 headings will be
uppercased:
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}Value
-
capitalize - Transforms the first character in each word to uppercase; all other characters remain unaffected—they’re not transformed to lowercase, but will appear as written in the document
-
lowercase - Transforms all characters to lowercase
-
none - Produces no capitalization effect at all
-
uppercase - Transforms all characters to uppercase
Meet the author
Adam is SitePoint's head of content, who also writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.
Login or Create Account to Comment
Login
Create Account
Recommended
Sponsors
HTML & CSS
GreenSock for Beginners (Part 2): GSAP's Timeline
In Part 2 of her GreenSock (GSAP) tutorial for beginners, Maria Antonietta Perna shows how GSAP timeline makes coding complex animations...
HTML & CSS
Building a 3D Rotating Carousel with CSS and JavaScript
Giulio Mainardi shows you how to build a 3D rotating carousel using CSS 3D transforms, with some nifty math tricks and some JavaScript to...