Text

Module: M2-R5: Web Design & Publishing

Chapter: Css Framework

W3.CSS Text Classes

W3.CSS provides various text utility classes to style your content easily.

1️⃣ Text Colors

Use w3-text-color classes to change text color.

<div class="w3-text-red">Red text</div>
<div class="w3-text-green">Green text</div>
<div class="w3-text-blue">Blue text</div>
Red text
Green text
Blue text
2️⃣ Text Alignment

Use w3-left, w3-center, w3-right for alignment.

<div class="w3-left">Left aligned</div>
<div class="w3-center">Center aligned</div>
<div class="w3-right">Right aligned</div>
Left aligned
Center aligned
Right aligned
3️⃣ Text Decoration

Use w3-bold, w3-italic, w3-underline, w3-hover-underline.

<div class="w3-bold">Bold text</div>
<div class="w3-italic">Italic text</div>
<div class="w3-underline">Underline text</div>
<div class="w3-hover-underline">Hover underline text</div>
Bold text
Italic text
Underline text
Hover underline text
4️⃣ Text Emphasis

Use w3-opacity and w3-opacity-off for faded or normal text.

<div class="w3-opacity">Faded text</div>
<div class="w3-opacity-off">Normal text</div>
Faded text
Normal text
Quick Links