W3.CSS Tags
Tags, Labels and Signs
Done New! More Later!
Falcon Ridge Parkway STOP! WATCH OUT!
W3.CSS Tag Classes
| Class | Defines |
|---|---|
| w3-tag | Rectangular tag or label |
In W3.CSS, the w3-tag class can be used for tags, labels, and signs.
Tags are Rectangular
The w3-tag class creates a rectangular tag (label or sign).
The default color is black:
Status: Done
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
can be used to modify the size of a tag:
w3-tinyw3-smallw3-largew3-xlargew3-xxlargew3-xxxlargew3-jumbo
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
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 »
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.
What You Have Learned
In this chapter you have learned how to:
- Create tags with
w3-tag - Also create labels and signs
- Change the color with
w3-colorclasses - Change the size with
w3-sizeclasses
More Examples
Explore more Tag features with W3.CSS.
Road Signs
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:
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 »
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:
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 tag or sign:
STOP
Example
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Try It Yourself »
Spinning Tags
The w3-spin class can be used to let a tag spin 360 degrees:
