W3CSS Text

In the previous article, we studied about Cards. In this article we shall focus on W3CSS text. W3CSS framework contains many classes that are used to style text and add text effects. These classes can align text, center text, add shadows to the text, and change its opacity. In this article, we shall discuss some of these classes.

W3CSS Text Alignment

There are three classes that are used to align text within a container element. The w3-left-align aligns the content to left, the w3-right-align aligns the content to right while w3-center centers the content. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-left-align">This is left aligned.</div>
    <div class="w3-center">This is centered.</div>
    <div class="w3-right-align">This is right aligned.</div>
    
  
    

</html>

Download the code Try the code

In the above code we have three divs. In the first div the content is aligned left. The second div aligns content in the center while the third div has content aligned to right.

Wide and Slim Text

A very interesting property of W3CSS is that you can wide and slim the text. Wide text has additional spaces between each character while slim text has compressed space between each character. The classes used for widening and slimming the text are w3-wide and w3-slim. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-wide">This is wide text.</div>
    <div class="w3-slim">This is slim text.</div>
   
    
  
    

</html>

Download the code Try the code

You can see in the above code that it has two divs. The first div has class w3-wide while the second div has a class w3-slim. If you open the above page in browser, you shall see wide text in the first line and slim text in the second line.

Shadow and Opacity

You can also add shadow to the text via w3-text-shadow class. Similarly, you can add opacity to the text via w3-opacity class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-blue w3-xxlarge">
        <h1 class="w3-text-shadow">Text Shadow</h1>
    </div>
    
     <div class="w3-panel w3-blue w3-xxlarge">
        <h1 class="w3-opacity">Text opacity</h1>
    </div>
    


</html>

Download the code Try the code

In the first panel we have added a shadow to the text while in the second panel we have added text with opacity.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .