Introduction
This chapter demonstrates about the W3CSS Signs Signs and Tags Which can be used to indicate some messages and following are the concepts covered in this chapter.
- Tags
- Signs
Description
W3.CSS Have several tags basically tags should be shown in rectangular boxes and which can be shown in several sizes following are the some tags as shown below.
The Image below demonstrates to creating a Tag as shown below.
Tags are Rectangular
In W3.CSS maximum tags are shown in Rectangular and the default color is Black which is done by using the w3-tag class. The code below demonstrates to shown Tags are rectangular as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Tags</h2>
<p>The w3-tag class creates a rectangular tag.</p>
<p>Tutorial: <span class="w3-tag">SPLESSONS</span></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Colored Tags
The Tags default color is Black user can change the color of the tags by using the w3-color class. In which user can assign the own colors to the tag and the code below demonstrates to assign color to the tag.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Tags</h2>
<p><span class="w3-tag w3-blue">SPLESSONS</span></p>
<p><span class="w3-tag w3-aqua">W3.CSS</span></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Tag sizes
In W3.CSS user can also change the size of the tag by default which take the container size but user can also arrange these tags in different sizes by using the w3-size class. Following are the sizes of w3-size class.
The code below demonstrates the modify the size of the tag as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Large Tags (Labels or Signs)</h2>
<p>
<span class="w3-tag w3-xlarge w3-blue">SP</span>
<span class="w3-tag w3-xxlarge w3-blue">SP</span>
<span class="w3-tag w3-xxxlarge w3-blue">SP</span>
</p>
<p>
<span class="w3-tag w3-jumbo w3-blue">SP</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">SP</span>
</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Letter Tags
User can also create the Letter Tags which means each tag for each letter. The code below demonstrates to get letter tags as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying Letters as Tags</h2>
<span class="w3-tag w3-xlarge w3-blue">S</span>
<span class="w3-tag w3-xlarge w3-blue">P</span>
<span class="w3-tag w3-xlarge w3-blue">L</span>
<span class="w3-tag w3-xlarge w3-blue">E</span>
<span class="w3-tag w3-xlarge w3-blue">S</span>
<span class="w3-tag w3-xlarge w3-blue">S</span>
<span class="w3-tag w3-xlarge w3-blue">O</span>
<span class="w3-tag w3-xlarge w3-blue">N</span>
<span class="w3-tag w3-xlarge w3-blue">S</span>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Spinning Tags
User can also define the spinning Tag by using w3-spin class The code below demonstrates the Spinning tags as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying a Spinning Sign</h2>
<span class="w3-tag w3-spin w3-large w3-blue">
SPLESSONS
</span>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Tags are Rectangular
- Colored Tags
- Tag sizes
- Letter Tags
- Spinning Tags
- w3-tiny
- w3-small
- w3-large
- w3-xlarge
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Description
Signs is known as the Tags with large size. The code below demonstrates the signs as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying a Tag as a Sign</h2>
<div class="w3-tag w3-xxlarge w3-blue">SPLESSONS</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Rounded Signs
User can also get the signs as large with rounded corners by using w3-round-signs class . The code below demonstrates to get the rounded signs as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Displaying Rounded Signs</h2>
<span class="w3-tag w3-padding w3-round-large w3-blue w3-center">
START<br>
LEARNING<br>
SPLESSONS
</span>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Large tags is known as signs.
- Tags look more effective in web pages.
- Tage by default take the container size.