HTML & CSS
Article
By Adam Roberts

text-transform (CSS property)

By Adam Roberts
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Syntax

text-transform: { capitalize | lowercase | none | uppercase | inherit } ;

Description

This property controls if and how an element’s text content is capitalized.

--ADVERTISEMENT--

Example

These style rules make
h1 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
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?