×

Set Text Case Using text-transform [9/16]

Using CSS you can even control the character case, i.e., switch between lowercase and uppercase. This is performed by the text-transform property. Its values ​​are:

  1. lowercase – make all letters lowercase
  2. uppercase – make all letters uppercase
  3. capitalize – start each word with a capital letter
  4. none – undo the case change.

Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Set Text Case Using text-transform</title> </head> <body> <h1>Bad Graceful Degradation</h1> <p>In the simplest case of bad <span class="lower">Graceful Degradation</span>, the site is created for the latest browsers, but for legacy browsers a message is added at the top of the page saying that the <span class="lower">BROWSER IS OUTDATED</span>. Nobody cares what would happen to the site in the old browser: would it collapse or not, would all the content be visible or something may disappear.</p> <p><span class="capital">What is also common to low-quality Graceful Degradation is that the interface fails with JavaScript</span> disabled. Here is a simple example: disable JavaScript in your browser and try to send a message in VKontakte.</p> </body> </html>
CSS
h1 { font-size: 24px; }
HTML Academy

Experimenting with text-transform:

  1. The title should be in uppercase.
  2. Tags with the lower class should be in lowercase.
  3. For the tags with the capital class, each word should begin with a capital letter.
Theory Check Next