CSS TEXT TRANSFORMATION

on

CSS text-transform

The text-transform property controls the capitalization of text.

text-transform: uppercase;

Main values

/* All letters uppercase */
text-transform: uppercase;
/* All letters lowercase */
text-transform: lowercase;
/* First letter of each word uppercase */
text-transform: capitalize;
/* Normal/default text */
text-transform: none;

Example

<p class="upper">hello world</p>
<p class="lower">HELLO WORLD</p>
<p class="capital">hello world</p>
.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

.capital {
  text-transform: capitalize;
}

Result:

  • uppercase → HELLO WORLD
  • lowercase → hello world
  • capitalize → Hello World
  • none → hello world (original text)

Note: text-transform changes how text is displayed; it does not change the actual text in the HTML.

Comments

Post a Comment