W3.CSS Tags

Last Updated : 02 Mar, 2021

The .w3-tag is used to add additional information to the content. For example, some website highlights some sections to be new or when they have updated a section they add updated tag with that division so that user can see that they have updated to added new divisions on their site. This class when used creates a rectangular tag which acts as a label or sign on the site. Its default color is black.

Example: Adding tags in the HTML page.

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">
            Welcome To GFG
        </h2>
    </div>
      
    <!-- Tags in W3.CSS -->
    <div class="w3-container"> 
        <h5>Updates  
            <!-- Adding Tag with value "More later" -->
            <span class="w3-tag">More Later</span> 
        </h5> 
            
        <h5>Messages  
            <!-- Adding Tag with value "New" -->
            <span class="w3-tag">New</span> 
        </h5> 
        <h5>Request
            <!-- Adding Tag with value "Done" -->
            <span class="w3-tag">Done</span> 
        </h5>
    </div> 
</body>
  
</html>

Output:

Colors can be added to the tags using the color classes of W3.CSS.

Example: Adding colored tags on the HTML Page.

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">
            Welcome To GFG
        </h2>
    </div>
      
    <!-- Tags in W3.CSS -->
    <div class="w3-container"> 
        <h5>Updates  
            <!-- Adding Tag with value "More later" -->
            <span class="w3-tag w3-teal">More Later</span> 
        </h5> 
            
        <h5>Messages  
            <!-- Adding Tag with value "New" -->
            <span class="w3-tag w3-blue">New</span> 
        </h5> 
        <h5>Request
            <!-- Adding Tag with value "Done" -->
            <span class="w3-tag w3-purple">Done</span> 
        </h5>
    </div> 
</body>
</html>

Output:

We can add various sized tags using font-sizes available in W3.CSS classes.

Example: Adding tags of different sizes.

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">
            Welcome To GFG
        </h2>
    </div>
      
    <!-- Tags in W3.CSS -->
    <div class="w3-container"> 
        <h5>Updates  
            <!-- Adding Tag with value "More later" -->
            <span class="w3-tag w3-teal w3-small">
               More Later</span> 
        </h5> 
            
        <h5>Messages  
            <!-- Adding Tag with value "New" -->
            <span class="w3-tag w3-blue 
                w3-large">New</span> 
        </h5> 
  
        <h5>Request
            <!-- Adding Tag with value "Done" -->
            <span class="w3-tag w3-purple 
                w3-jumbo">Done</span> 
        </h5>
    </div> 
</body>
  
</html>

Output:

We can also add round-edged tags using border-radius classes in 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">
            Welcome To GFG
        </h2>
    </div>
      
    <!-- Tags in W3.CSS -->
    <div class="w3-container"> 
        <h5>Updates  
            <!-- Adding Tag with value "More later" -->
            <span class="w3-tag w3-teal 
                w3-round">More Later</span> 
        </h5> 
            
        <h5>Messages  
            <!-- Adding Tag with value "New" -->
            <span class="w3-tag w3-blue 
                w3-round-large">New</span> 
        </h5> 
        <h5>Request
            <!-- Adding Tag with value "Done" -->
            <span class="w3-tag w3-purple 
                w3-round-xlarge">Done</span> 
        </h5>
    </div> 
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles

HTML

HTML

HTML

HTML