ADVERTISEMENT
Google AdSense Slot (headerLeaderboard)
Set your Publisher ID in src/config/ads.ts to display live ads.
W3.CSS Tutorial• 5 min read
Typography & Color Systems
w3-text-color, w3-color, font sizing utilities, and custom color themes
W3.CSS includes built-in semantic color palettes (teal, red, green, blue, dark-grey) along with font sizing utilities like w3-xlarge and w3-jumbo.
Applying Background and Text Colors
Background colors: w3-teal, w3-green, w3-amber, w3-blue-grey, w3-black.
Text colors: w3-text-teal, w3-text-red, w3-text-grey, w3-text-white.
Font sizing: w3-small, w3-medium (default 16px), w3-large (18px), w3-xlarge (24px), w3-xxlarge (36px), and w3-jumbo (64px).
Hero Typography and Theming
<div class="w3-container w3-center w3-padding-64 w3-dark-grey">
<h1 class="w3-jumbo w3-text-teal"><b>CODEXIA ACADEMY</b></h1>
<p class="w3-xlarge">The world's largest online developer learning platform.</p>
<button class="w3-button w3-teal w3-large w3-round-large">Start Free Trial</button>
</div>Combines w3-jumbo headline with w3-text-teal accenting.
ADVERTISEMENT
Google AdSense Slot (inContentBanner)
Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
Which W3.CSS font sizing class renders text at 64px, ideal for dramatic hero banner headers?