| | |
W3.CSS Text:
W3.CSS Text:
W3.CSS has not that much to do with text but a few classes are there to stylize simple text. The classes to be used for text in W3.CSS are as follows-
- w3-left-align: Aligns the text left
- w3-right-align: Aligns the text right
- w3-center: Aligns the text centrally
- w3-wide: Increases letter spacing to make the text look wider
- w3-opacity: Increases the transparency of letters
A sample of w3-left-align, w3-right-align and w3-center classes is given here:
<div class="w3-panel w3-pale-red">
<p class="w3-left-align">India is a great country.</p>
<p class="w3-center">India is a great country.</p>
<p class="w3-right-align">India is a great country.</p>
</div>
Here three paragraphs are written in three lines with three different alignments.
Output:
A sample of w3-wide and w3-opacity classes is given here:
<div class="w3-panel w3-pale-red">
<p class="w3-wide">India is a great country.</p>
</div>
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Two panels are here- one with pale red background and the other with pink background. In the upper panel there is a wider text. In the lower panel there is a heading with predefined opacity.
Output:
Despite of all the classes discussed herewith, W3.CSS allows to produce more special effects with inline CSS codes. These effects can be made using the following properties-
- letter-spacing
- word-spacing
- line-height
- text-shadow