Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE

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 »