Open In App

W3.CSS Text And Fonts

Improve
Improve
Like Article
Like
Save
Share
Report

W3.CSS is one of the most popular, open-source front-end framework which helps us in developing responsive, mobile-first websites, and web applications. As a part of its offering, it provides us with a collection of classes, called the Text Utility classes, which controls various text properties, such as, text alignment, text size, text opacity.

Text Alignment: W3.CSS has three classes to align the text to center, left, and right. The description of them are as follows:

Sr. No. Class Name Description
1.

w3-left-align

It is used to align the text to the left.

2.

w3-right-align

It is used to align the text to the right.

3.

w3-center

It is used to align the text to the center.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
          GeeksForGeeks
      </h2>
    </div>
      
    <!-- Text Alignment Classes in W3.CSS -->
    <div class="w3-container">
          
        <!-- Text Alignment Classes -->
        <h3 class="w3-text-blue">Text Alignment Classes:</h3
          
        <div class="w3-container w3-pink w3-round-large">
              
            <!-- w3-left-align class -->
            <p class="w3-left-align">
                Using w3-left-align class...
            </p>
  
            <!-- w3-center class -->
            <p class="w3-center">
                Using w3-center class...
            </p>
   
            <!-- w3-right-align class -->
            <p class="w3-right-align">
              Using w3-right-align class...
          </p>
        </div>
    </div>
</body>
  
</html>


Output:

Wide Text: To make the text appear to look wider we make use of a w3-wide class of W3.CSS.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Wide Text Class in W3.CSS -->
    <div class="w3-container">
        <div class="w3-container">
              
            <!-- Normal text -->
            <h4 class="w3-text-pink">Normal Text:</h4>
              
            <p>
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
            <!-- Wide text -->
            <h4 class="w3-text-pink">Wide Text:</h4>
            <p class="w3-wide">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
        </div>
    </div>
</body>
  
</html>


Output:

Font Sizes:

You can set the font of the text using the size classes of the W3.CSS. The classes that come under this category are as follows:

Sr. No. Class Name Description
1. w3-tiny This class sets the font size of the targeted element to 10px.
2. w3-small This class sets the font size of the targeted element to 12px.
3. w3-large This class sets the font size of the targeted element to 18px.
4. w3-xlarge This class sets the font size of the targeted element to 24px.
5. w3-xxlarge This class sets the font size of the targeted element to 32px.
6. w3-xxxlarge This class sets the font size of the targeted element to 48px.
7. w3-jumbo This class sets the font size of the targeted element to 64px.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <!-- w3-container is used to add 16px
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Different Text Sizes in W3.CSS -->
    <div class="w3-container">
        <div class="w3-container">
  
            <!-- w3-tiny text -->
            <h4 class="w3-text-pink w3-tiny">
                w3-tiny Text:
            </h4>
            <p class="w3-tiny">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
  
            <!-- w3-small text -->
            <h4 class="w3-text-pink w3-small">
                w3-small Text:
            </h4>
            <p class="w3-small">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
  
            <!-- w3-large text -->
            <h4 class="w3-text-pink w3-large">
                w3-large Text:
            </h4>
            <p class="w3-large">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
  
            <!-- w3-xlarge text -->
            <h4 class="w3-text-pink w3-xlarge">
                w3-xlarge Text:
            </h4>
            <p class="w3-xlarge">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
  
            <!-- w3-xxlarge text -->
            <h4 class="w3-text-pink w3-xxlarge">
                w3-xxlarge Text:
            </h4>
            <p class="w3-xxlarge">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
  
            <!-- w3-xxxlarge text -->
            <h4 class="w3-text-pink w3-xxxlarge">
                w3-xxxlarge Text:
            </h4>
            <p class="w3-xxxlarge">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
            <!-- w3-jumbo text -->
            <h4 class="w3-text-pink w3-jumbo">
                w3-jumbo Text:
            </h4>
            <p class="w3-jumbo">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
        </div>
    </div>
</body>
  
</html>


Output:

Font Styles: W3.CSS also has some inbuilt font styles which can be extensively used to decorate webpages. The list of the classes for the font styles are as follows:

Sr. No.

Class Name

Description

1.

w3-serif

The font style is changed to serif.

2.

w3-sans-serif

The font style is changed to sans-serif.

3.

w3-cursive

The font style is changed to cursive.

4.

w3-monospace

The font style is changed to monospaced.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <!-- w3-container is used to add 16px
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
  
    <!-- Different Font Styles in W3.CSS -->
    <div class="w3-container">
        <div class="w3-container">
  
            <!-- w3-serif Styled Text -->
            <h4 class="w3-text-pink">
                w3-serif Styled Text:
            </h4>
            <p class="w3-serif">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
  
            <!-- w3-sans-serif Styled Text -->
            <h4 class="w3-text-pink">
                w3-sans-serif Styled Text:
            </h4>
            <p class="w3-sans-serif">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
  
  
            <!-- w3-cursive Styled Text -->
            <h4 class="w3-text-pink">
                w3-cursive Styled Text:
            </h4>
            <p class="w3-cursive">
                GeeksforGeeks is a Computer
                Science portal for geeks.
            </p>
  
  
            <!-- w3-monospace Styled Text -->
            <h4 class="w3-text-pink">
                w3-monospace Styled Text:
            </h4>
            <p class="w3-monospace">
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
        </div>
    </div>
</body>
  
</html>


Output:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads