[html] Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS

How to convert UPPERCASE letter to lowercase and first letter Uppercase for each sentences like below only by using CSS?

From: THIS IS AN EXAMPLE SENTENCE.

To: This is an example sentence.

Update: When I'm using text-transform: capitalize; The result still same.

convert element's textContent to lowercase with JS..

el.textContent = el.textContent.toLowerCase();

then just use css..

text-transform: capitalize;

can simply use style inside element

<p style="text-transform: lowercase;">HI I AM NEW HERE</p>

I know the OP is asking for a CSS-only solution. But in case anyone landing here from the Magic Google ends up requiring a JavaScript solution, here's a one-liner:

capitalize = str => str[0].toUpperCase() + str.substr(1);

e.g.:

capitalize('foo bar baz'); // -> 'Foo bar baz'

You can't do that purely with CSS. There is a text-transform attribute, but it only accepts none, capitalize, uppercase, lowercase and inherit.

You might want to look into either a JS solution or a server-side solution for that.

Use mixins

@mixin sentence-case() {_x000D_
  text-transform: lowercase;_x000D_
  &:first-letter {_x000D_
    text-transform: uppercase;_x000D_
  }_x000D_
}_x000D_
_x000D_
// USAGE:_x000D_
.title {_x000D_
  @include sentence-case();_x000D_
}

Just Simply use

use css code: text-transform: uppercase;

If use this on capitalized text;

p text-transform: lowercase;

Then show the text, it is lowercase but if you copy that lower-cased text, and paste it, it change back to original capitalized.

If you want to use for <input> it will not work, for <input> or text area you need to use Javascript

<script language="javascript" type="text/javascript">
function capitaliseName()
{
    var str = document.getElementById("name").value;
    document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1);

}
</script>

<textarea name="NAME" id="name" onkeydown = "capitaliseName()"></textarea>

that is supposed to work well for <input> or <textarea>

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.

If you can make all characters lowercase on the server than you can apply:

text-transform: capitalize

I don't think text-transform will work with uppercase letters as the input.

Simple:

text-transform: capitalize;