W3.CSS — Text

Text Alignment

<p class="w3-left">Left aligned text</p>
<p class="w3-right">Right aligned text</p>
<p class="w3-center">Center aligned text</p>
<p class="w3-justify">Justified text that spans multiple lines and aligns to both left and right margins.</p>

Text Transform

<p class="w3-uppercase">uppercase text</p>
<p class="w3-lowercase">LOWERCASE TEXT</p>
<p class="w3-capitalize">capitalize each word</p>

Text Effects

<!-- Text shadow -->
<p class="w3-text-shadow">Text with shadow</p>

<!-- Text hover -->
<p class="w3-hover-shadow">Text with hover shadow</p>

Text Colors

<p class="w3-text-red">Red text</p>
<p class="w3-text-blue">Blue text</p>
<p class="w3-text-green">Green text</p>
<p class="w3-text-orange">Orange text</p>
<p class="w3-text-purple">Purple text</p>
<p class="w3-text-grey">Grey text</p>

Text Spacing

<p class="w3-wide">Wide letter spacing</p>
<p class="w3-wide w3-large">Wide letter spacing, large</p>

Text Examples

<!-- Heading with styling -->
<h1 class="w3-text-blue w3-center">Centered Blue Heading</h1>

<!-- Paragraph with justification -->
<p class="w3-justify w3-large">
    This paragraph is justified and uses a large font size.
    It aligns to both left and right margins for a clean look.
</p>

<!-- Text with different colors -->
<p>
    <span class="w3-text-red">Red</span>
    <span class="w3-text-blue">Blue</span>
    <span class="w3-text-green">Green</span>
</p>

Text Utilities

Class	Description
w3-left	Left align
w3-right	Right align
w3-center	Center align
w3-justify	Justify text
w3-uppercase	Uppercase
w3-lowercase	Lowercase
w3-capitalize	Capitalize words

Mini Practice

Create HTML code that:

1. Aligns text to the center
2. Creates uppercase text
3. Uses different text colors
4. Adds letter spacing to a heading

Up Next

Next: Learn about W3.CSS Display.