HTML & CSS

text-transform (CSS property)

    Adam Roberts
    Share

    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 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