Typography and text alignment (w3-center, w3-left).
W3.CSS has a group set of classes related to typography to control and manage the size, content weight, content styles and default black color of any webpage content text using W3.CSS in existing HTML website webpage.
So let’s learn about the classes related to typography in W3.CSS in HTML website.
W3.CSS Text Size Classes.
You can preview web page text content font size in large to small size order using W3.CSS .w3-xlarge, .w3-large, .w3-small, etc. built-in readymade text classes in your existing HTML website webpage.
W3.CSS Text Size Classes Example.
<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>
<p class=”w3-small”>This is a smaller text example </p>
Classes for W3.CSS text size.
- .w3-xlarge — Previews text in extra large text size in existing HTML website webpage.
- .w3-large — It previews the web page text content in the current HTML website webpage in large size order.
- .w3-small — It previews the web page text content in the current HTML website webpage in small text font size.
- .w3-xsmall — It previews the web page text content in the current HTML website webpage in extra small size.
- .w3-tiny — It previews the web page text content in the current HTML website webpage in small tiny size.
W3.CSS Text Weight Classes.
You can use W3.CSS Text Weight Classes in your current HTML website webpage to preview any web page text content weight in bold or slightly dark order.
W3.CSS Text Weight Classes Example.
<p class=”w3-bold”>Example of W3.CSS bold text </p>
W3.CSS Classes for Text Weight.
- .w3-bold — This previews the webpage text content text in bold order in the current HTML website webpage.
- .w3-light — This previews the webpage text content text in light thin order in the current HTML website webpage.
- .w3-medium — This previews the webpage text content text in default (medium) font typography weight order in the current HTML website webpage.
W3.CSS Text Style Classes.
You use text style classes in W3.CSS text to control and manage the default style of your existing webpage text in your existing HTML website webpage, such as italicizing and underlining webpage content.
Example of W3.CSS Text Style Classes.
<p class=”w3-italic”> italicized text example</p>
<p class=”w3-underline”> underlined text example</p>
Classes for W3.CSS text styles.
- .w3-italic — It previews the text content text in italic order in the current HTML website webpage.
- .w3-underline — It underlines the text content text in the current HTML website webpage.
W3.CSS Text Color Classes.
W3.CSS provides you with a number of built-in collections of color classes to change the color of the text in your current HTML website webpage.
Example of W3.CSS text color.
<p class=”w3-text-yellow”> yellow text example</p>
<p class=”w3-text-green”>green text example</p>
Classes for W3.CSS text color.
- .w3-text-red — It previews the text content text in the current HTML website webpage in red text color.
- .w3-text-blue — It displays the text content text in the current HTML website webpage in blue color.
- .w3-text-green — It previews the text content text in the current HTML website webpage in green color.
- .w3-text-grey — It previews the text content text in the current HTML website webpage in grey text color order.
- .w3-text-yellow — It previews the text content text in the current HTML website webpage in yellow color.
W3.CSS Text Transform Classes.
You can manage text capitalization order in your current HTML website webpage by previewing text in upper case, lower case, capitalized order with W3.CSS Text Transform Example.
Classes for W3.CSS Text Transform.
- .w3-uppercase — It previews the text content text in the current HTML website webpage in uppercase text order.
- .w3-lowercase — It previews the text content text in lowercase text order in the current HTML website webpage.
- .w3-capitalize — It previews the first character of each word of the text content text in capitalized upper case order in the current HTML website webpage.
Example of W3.CSS text alignment and typography.
<p class=”w3-uppercase”>You see uppercase text</p>
<p class=”w3-lowercase”>You see lowercase text.</p>
You can use W3.CSS classes like text alignment and typography to style text in an effective order in your current HTML website webpage with W3.CSS text.
Here is a W3.CSS example of centered, bold and capitalized text with green color.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Let Tray W3.CSS Typography Example</title>
</head>
<body>
<div class=”w3-left w3-xlarge w3-bold w3-capitalize w3-text-green”> <!– example of left-aligned, bold, large, and green text example–>
<h1>You Can See W3.CSS Typography </h1>
<p>You Can See Many Other w3.css Attributes</p>
</div>
<div>
<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>
<p class=”w3-small”>This is a smaller text example </p>
<div>
<p class=”w3-bold”>Example of W3.CSS bold text </p>
</div>
<div>
<p class=”w3-italic”> italicized text example</p>
<p class=”w3-underline”> underlined text example</p>
</div>
<div>
<p class=”w3-text-yellow”> yellow text example</p>
<p class=”w3-text-green”>green text example</p>
<div>
<p class=”w3-uppercase”>You see uppercase text</p>
<p class=”w3-lowercase”>You see lowercase text.</p>
</div>
</div>
</body>
</html>
