Syntax
text-transform
Controlling capitalization of text.
Overview
| Class | Declarations |
|---|---|
text-transform:transform | text-transform: transform;
|
text-transform:none | text-transform: none;
|
capitalize | text-transform: capitalize;
|
uppercase | text-transform: uppercase;
|
lowercase | text-transform: lowercase;
|
capitalizeHeavy Boxes Perform Quick Waltzes And Jigs.
lowercaseheavy boxes perform quick waltzes and jigs.
uppercaseHEAVY BOXES PERFORM QUICK WALTZES AND JIGS.
uppercase::first-letterHeavy boxes perform quick waltzes and jigs.
text-transform:noneheavy boxes perform quick waltzes and jigs.
Basic usage
Capitalized text
Convert the first letter of each word to uppercase.
Heavy Boxes Perform Quick Waltzes And Jigs.
<p class="capitalize">heavy boxes perform quick waltzes and jigs.</p>Lowercase text
Convert all characters to lowercase.
heavy boxes perform quick waltzes and jigs.
<p class="lowercase">HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.</p>Uppercase text
Convert all characters to uppercase.
HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.
<p class="uppercase">heavy boxes perform quick waltzes and jigs.</p>Sentence
Capitalize the first letter of a sentence.
Heavy boxes perform quick waltzes and jigs.
<p class="uppercase::first-letter">heavy boxes perform quick waltzes and jigs.</p>Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="uppercase:hover uppercase@sm uppercase@dark uppercase@print">…</div>