Syntax
text-transform
Controlling capitalization of text.
Overview
| Class | Declarations |
|---|---|
capitalize | text-transform: capitalize;
|
uppercase | text-transform: uppercase;
|
lowercase | text-transform: lowercase;
|
text-transform:none | text-transform: none;
|
text-transform:`transform` | text-transform: `transform`;
|
capitalize
Heavy Boxes Perform Quick Waltzes And Jigs.
lowercase
heavy boxes perform quick waltzes and jigs.
uppercase
HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.
uppercase::first-letter
Heavy boxes perform quick waltzes and jigs.
text-transform:none
heavy 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>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="uppercase:hover uppercase@sm uppercase@dark uppercase@print">…</div>