W3.CSS Tags
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:
Contact Us