W3CSS Tags

In the previous article we started our discussion on badges. Tags are used to display signs or symbols on webpage. For instance, the are used to alert user that it is not safe to click a link etc. Like badges, tags are also created using span tags. Simply add w3-tag class to the opening span tag and you are done. Unlike badges, tags carry their own meaning and it is not necessary to wrap them inside a list, or button or paragraph etc. Though you can if you want. In this article and the next one, we shall study W3CSS tags.

Basic W3CSS Tags

To create a basic W3CSS tag, add w3-tag class to the opening span tag. 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>
    
  

  <span class="w3-tag">Messages</span>


</body>
    
</html>

Download the code Try the code

Colored Tags

By default, tags are black like default badges. However you can add color to the tags via w3-color class. Use this class in conjunction with w3-tag class to create colored tags. In the following example we shall create red and green tags. Take a look at it:

<!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>
    
  
  <span class="w3-tag w3-red">Stop</span>
  <span class="w3-tag w3-green">Start</span>


</body>
    
</html>

Download the code Try the code

Tag Sizes

Tags can be of multiple sizes as defined by the classes. The classes that define size of the tag are w3-tiny,
w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge and w3-jumbo. All of these classes have been demonstrated in the following example. Take a look at it:

<!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>
    
  
  <span class="w3-tag w3-red w3-tiny">Stop</span>
    <span class="w3-tag w3-red w3-small">Stop</span>
    <span class="w3-tag w3-red w3-large">Stop</span>
    <span class="w3-tag w3-red w3-xlarge">Stop</span>
    <span class="w3-tag w3-red w3-xxlarge">Stop</span>
    <span class="w3-tag w3-red w3-xxxlarge">Stop</span>
    <span class="w3-tag w3-red w3-jumbo">Stop</span>

  


</body>
    
</html>

Download the code Try the code

Tags as Signs Or Symbols

Normal tags with larger size and text on them can be used as signs or symbols. In the following example we have used two symbols “Stop, Construction Ahead” and “Animal” Crossing symbol using large and x-large size. Also, using appropriate color for your tag can help convey meaning of the symbol. 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>
    
  
  <span class="w3-tag w3-red w3-large">Stop! Contruction Ahead</span>
    <span class="w3-tag w3-orange w3-xlarge">Animal Crossing</span>
 


</body>
    
</html>

Download the code Try the code

<<< W3CSS BadgesW3CSS Tag Types >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .