The text-transform property in CSS controls text case and capitalization.

.lowercase {
  text-transform: lowercase;

Text-Transform Values

  • lowercase makes all of the letters in the selected text lowercase.
  • uppercase makes all of the letters in the selected text uppercase.
  • capitalize capitalizes the first letter of each word in the selected text.
  • none leaves the text's case and capitalization exactly as it was entered.
  • inherit gives the text the case and capitalization of its parent.

The demo below shows lowercase, uppercase, and capitalize in use. Take a look at the HTML tab to see how the text was originally written, then switch back to the results tab to see it after the CSS is applied.

See the Pen 0f4293fce0d14aafc3818c950ab0ded3 by mariemosley (@mariemosley) on CodePen.

Points of Interest

capitalize will capitalize words that appear inside single or double quotes, and the first letter after a hyphen. It won't capitalize the first letter after a number, so dates like "February 4th, 2015" won't transform into "February 4Th, 2015".

capitalize only affects the first letters of words. It will not change the case of the rest of the letters in a word. For example, if you capitalize a word that's in all capital letters already, the other letters in the word won't switch to lowercase. This is nice when your text includes an acronym or abbreviation that shouldn't include any lowercase letters.

CSS can't do "title case", the capitalization style used in titles of books, movies, songs, and poems, where articles are lowercase (as in "Raiders of the Lost Ark"). But, there are JavaScript solutions for title case, including David Gouch's toTitleCase().

Related Properties

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any

Firefox supports language-specific capitalization rules for Turkic languages, German, Dutch, and Greek that are not supported by other browsers. Firefox is also the only browser that supports text-transform: full-width;, which can help improve the readability of text that includes a mixture of latin and East Asian scripts. See details at MDN.


  1. User Avatar
    Permalink to comment#

    If content is put in with all CAPS, and the front-end should be Capitalized, using capitalize won’t work, as Chris points out. How can all caps be changed into capitalized words with CSS, and without going into the CMS and changing the text? I tried wrapping the text in a parent span, lowercasing that, than capitalizing the child span, but that didn’t work for obvious reasons – but it was one of those ‘might as well try it’ ideas.

    • User Avatar
      Jorge Hawkins
      Permalink to comment#

      Use text-transform: uppercase on the first letter, and text-transfrom: lowercase on the rest.

      element:first-letter {text-transform:uppercase}
      element {text-transform:lowercase}

    • User Avatar
      Permalink to comment#

      I tried this:

      element:first-letter {text-transform:uppercase}
      element {text-transform:lowercase}

      but this doesn’t work. It returns all letters to be small letters

    • User Avatar
      Joe G
      Permalink to comment#

      @Samuel . this worked when the letters came into the source all caps. Tested in Chrome. What browser are you trying it in? It’s cross-browser compatible so it should be fine: http://caniuse.com/#search=first-letter

      .page-content .page-title::first-letter {
          font-weight: 600;
          text-transform: uppercase;
      .page-content .page-title {
          font-size: 26px;
          text-transform: lowercase;
    • User Avatar

      Just to clarify:
      selector:first-letter {} 1x : won’t work since that’s trying to target a pseudo-class.

      It has to be:
      selector::first-letter {} 2x : which targets the ‘first-letter’ pseudo-element.

      Joe’s snippet has the correct :: in action.

    • User Avatar
      Govind Patil
      Permalink to comment#

      Browser support needs correction here.
      “initial” value is not supported in IE11 and Lower Versions. Instead we can set value “none” which works on all major browsers.

  2. User Avatar
    Permalink to comment#

    @JOE, I have a similar issue as yours. The input data is all caps which I convert into camel case/title case using the CSS text-transform:capitalize after converting them to lowercase. But the issue now is, few abbreviations and acronyms such as “US” or “U.S”, also go through this transformation. This needs to be avoided. Any ideas or suggestions?

  3. User Avatar
    Permalink to comment#

    Wishing there was a “sentence case” so I could turn huge blocks of all caps text into comfortably readable sentences with just the initial letter of the first word capitalized. Maybe in the next version of CSS? (crossing fingers…)

  4. User Avatar
    Permalink to comment#

    If the display is inline the above wont work

  5. User Avatar
    Sara Walker
    Permalink to comment#

    CHRIS COYIER – you ARE the man! You help me out on a daily basis with your ‘CSS Tricks’. Thank you for your insight – as always.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.