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

Capitalize first letter of sentences CSS

You can capitalize the first letter of the .qcont element by using the pseudo-element :first-letter.

.qcont:first-letter{
  text-transform: capitalize
}

This is the closest you're gonna get using only css. You could use javascript (in combination with jQuery) to wrap each letter which comes after a period (or comma, like you wish) in a span. You could add the same css as above to that span. Or do it in javascript all together.

Here's a snippet for the css approach:

.qcont:first-letter {  text-transform: capitalize}

<p class="qcont">word, another word</p>

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

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>

First letter Capitalize and other letters in lower case in css?

You could use text-transform in order to make each word of a paragraph capitalized, as follows:

p { text-transform: capitalize; }

It's supported in IE4+. Example Here.

16.5 Capitalization: the 'text-transform' property

This property controls capitalization effects of an element's text.

capitalize
Puts the first character of each word in uppercase; other
characters are unaffected.

---

Making each word of an uppercase text, capitalized:

The following was under this assumption:

I want to make it look like: This Is Sometext

You have to wrap each word by a wrapper element like <span> and use :first-letter pseudo element in order to transform the first letter of each word:

<p>
  <span>THIS</span> <span>IS</span> <span>SOMETEXT</span>
</p>

p { text-transform: lowercase; }    /* Make all letters lowercase */
p > span { display: inline-block; } /* :first-letter is applicable to blocks */

p > span:first-letter {
  text-transform: uppercase;        /* Make the first letters uppercase      */
}

Example Here.

Alternatively, you could use JavaScript to wrap each word by a <span> element:

var words = $("p").text().split(" ");
$("p").empty();

$.each(words, function(i, v) {
    $("p").append($("<span>").text(v)).append(" ");
});

Example Here.

---

Making the first letter of an uppercase text, capitalized:

This seems to be what you are really looking for, that's pretty simple, all you need to do is making all words lowercase and then transforming the first letter of the paragraph to uppercase:

p { text-transform: lowercase; }

p:first-letter {
  text-transform: uppercase;
}

Example Here.

Making first letter of each sentence uppercase

Appears to be due to using SCSS syntax when it looks like you might be talking about SASS (based on the question tag).

In SASS, the mixin would be defined as:

-sentence-case()
  text-transform: lowercase

  :first-letter
    text-transform: uppercase

.sentenceCase
  +sentence-case()

In SCSS, the mixin would be defined as:

@mixin sentence-case() {
  text-transform: lowercase;

  &:first-letter {
    text-transform: uppercase;
  }
}

.sentenceCase {
  @include sentence-case();
}

And in either case you would then assign the .sentenceCase class to an element with:

<p class="sentenceCase"></div>

Which results in:

.sentenceCase {  text-transform: lowercase;}.sentenceCase:first-letter {  text-transform: uppercase;}

<p class="sentenceCase">our first sentance</p>
<p class="sentenceCase">our second first sentance</p>

Transform Uppercase Text to Lowercase, Except for first letter in CSS

One option is to use the first-letter pseudo-selector.

div {  text-transform: lowercase;}
div::first-letter {  text-transform: uppercase;}

<div>PARROT</div>

---

Related Topics