Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS

You will not be able to capitalize the first word of each sentence with CSS.

CSS offers text-transform for capitalization, but it only supports capitalize, uppercase and lowercase. None of these will do what you want. You can make use of the selector :first-letter, which will apply any style to the first letter of an element - but not of the subsequent ones.

p {
    text-transform: lowercase;
}
p:first-letter {
    text-transform: capitalize;
}
<p>SAMPLE TEXT. SOME SENTENCE. SOMETHING ELSE</p>
<!-- will become this:
Sample text. some sentence. something else. -->

That is not what you want (and :first-letter is not cross-browser compatible... IE again).
The only way to do what you want is with a kind of programming language (serverside or clientside), like Javascript or PHP. In PHP you have the ucwords function (documented here), which just like CSS capitalizes each letter of each word, but doing some programming magic (check out the comments of the documentation for references), you are able to achieve capitalization of each first letter of each sentence.

The easier solution and you might not want to do PHP is using Javascript. Check out the following page - Capital Letters - for a full blown Javascript example of doing exactly what you want. The Javascript is pretty short and does the capitalization with some String manipulation - you will have no problem adjusting the capitalize-sentences.js to your needs.

In any case: Capitalization should usually be done in the content itself not via Javascript or markup languages. Consider cleaning up your content (your texts) with other means. Microsoft Word for example has built in functions to do just what you want.


There is no sentence caps option in CSS. The other answers suggesting text-transform: capitalize are incorrect as that option capitalizes each word.

Here's a crude way to accomplish it if you only want the first letter of each element to be uppercase, but it's definitely nowhere near actual sentence caps:

p {
  text-transform: lowercase;
}

p::first-letter {
  text-transform: uppercase;
}
<p>THIS IS AN EXAMPLE SENTENCE.</p>
<p>THIS IS ANOTHER EXAMPLE SENTENCE.
   AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.</p>

Tags:

Html

Css