Let’s say you are being sent data from all over the world. But what if you get data in all sorts of odd capitalization? For example:

  1. SOMETHING SET IN CAPITALS
  2. SOmething that has common capitalization Mistakes
  3. something that channels e.e. cummings

Use CSS like that below to correct these common capitalization discrepancies.

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

This takes the whole string inside the element and down-cases it for a uniform letterset, then it capitalizes the first letter using the pseudo-class first-letter.

The HTML:

<p>TEXT THAT IS SET IN ALL CAPITALS.</p>
<p>TExt that wAs wriTTEn rather poorly.</p>
<p>A normal sentence would be treated just fine.</p>

The CSS:

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

The Result:

Text that is set in all capitals.

Text that was written rather poorly.

A normal sentence would be treated just fine.

View the JS Fiddle.