Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS Tags (Labels and Signs)


Tags: Done New! More Later!

Tags as signs: Falcon Ridge Parkway STOP! WATCH OUT!


W3.CSS Tag Classes

W3.CSS provides one class for tags, labels, and signs:

Class Defines
w3-tag Rectangular black tag/label

Tags, Labels, and Signs

In the W3.CSS world there is no real difference between a tag, a label, or a sign.


Tags are Rectangular

The w3-tag class creates a rectangular tag (label or sign). The default color is black:

Status: Done

Example

<p>Status: <span class="w3-tag">Done</span></p>
Try It Yourself »

Colored Tags

Use a w3-color class to change the color of a tag:  

New!

More Later!

Example

<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>
Try It Yourself »


Tag Sizes

By default, a tag will inherit the size of its container.

The w3-size classes (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) can be used to modify the size of a tag:

6 6 6

66 66 66

66 66

You might want to add some extra padding to large tags:

Example

<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
Try It Yourself »

Letter Tags

A U G U S T

Example

<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>
Try It Yourself »
S A L E

Example

<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>
Try It Yourself »

Signs

Signs are nothing but large tags.

London Zoo

Example

<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Try It Yourself »

Road Signs

Falcon Ridge Parkway

Example

<div class="w3-tag w3-round w3-green" style="padding:3px">
  <div class="w3-tag w3-round w3-green w3-border w3-border-white">
    Falcon Ridge Parkway
  </div>
</div>
Try It Yourself »

Large Signs

The w3-size classes can be used to display large signs:

IN CASE OF
EMERGENCY:
RUN LIKE HELL!

Example

<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Try It Yourself »
49,99

Example

<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Try It Yourself »

Rounded Signs

The w3-round-size classes can be used to add rounded corners to a sign:

DO NOT
BREATHE
UNDER WATER

Example

<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Try It Yourself »

Rotating Tags

Use the standard CSS transform property to rotate a sign:

STOP

Example

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Try It Yourself »

Note: transform:rotate() does not work in IE 9 and earlier.


Spinning Tags

The w3-spin class can be used to let a sign spin 360 degrees:

STOP

Example

<span class="w3-tag w3-spin w3-large">
STOP
</span>
Try It Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.