THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JQUERY XML MORE FORUM EXERCISES REFERENCES

W3.CSS Tags (Labels and Signs)

❮ Previous Next ❯

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 »

❮ Previous Next ❯