CSS Tags - Naukri Code 360

Introduction

CSS tags are special elements used in web design to style & format the content of a webpage. They allow you to change the look of text, images, links & other parts of a page without altering the actual content. CSS tags give you control over colors, sizes, spacing & more.

In this article, we will explore different types of CSS tags like classes, labels, rectangular tags, colored tags, tag sizes, letter tags & signs. We will also look at some examples of styling tags for specific uses like road signs, large signs & rounded signs. With the use of CSS tags, you will be able to create visually appealing & well-formatted webpages which increased the look and feel of our website.

CSS Tag Classes

CSS tag classes are a way to apply specific styles to elements on a webpage that share the same class name. By defining a class in your CSS code, you can easily style multiple elements at once without having to repeat the same code for each one.

To create a class, you start by choosing a name for it. The name can be anything you want, but it's best to choose something descriptive that relates to the purpose of the class. For example, if you want to create a class for important text, you might name it "important-text".

Once you have a name, you define the class in your CSS code using the dot notation, like this:

.important-text {
  font-weight: bold;
  color: red;
}

In this example, any element with the class "important-text" will have bold text & red color applied to it.

To use the class in your HTML, you simply add the class attribute to the element & set its value to the name of the class, like this:

<p class="important-text">This is important text!</p>

Note -: By using classes, you can keep your CSS code organized & apply consistent styles across your website with minimal effort.

Tags, Labels, & Signs

In CSS, you can use tags, labels & signs to create visual elements that help organize & highlight content on a webpage. These elements are often used for things like categorizing blog posts, labeling products, or creating eye-catching callouts.

One common use of tags is to create a list of keywords or categories for a blog post or article. To create a tag, you can use a <span> element with a specific class name, like this:

<span class="tag">CSS</span>
<span class="tag">Web Design</span>
<span class="tag">HTML</span>

Then in your CSS, you can style the tags to look like small, clickable badges:

.tag {
  display: inline-block;
  background-color: #eee;
  color: #333;
  padding: 5px 10px;
  border-radius: 20px;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}

Labels are similar to tags but are often used for more specific purposes, like labeling products or adding captions to images. You can create labels using the same techniques as tags, but with different class names & styles to fit their specific use case.

Signs are larger, more attention-grabbing elements that can be used to highlight important information or calls to action. For example, you might create a sign to promote a sale or direct users to a specific page. Signs can be created using a combination of HTML elements & CSS styles, like this:

<div class="sign">
  <h2>50% Off Sale!</h2>
  <p>Use code SUMMER50 at checkout.</p>
</div>

css
.sign {
  background-color: #ff0000;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

Note -: By using tags, labels & signs in your web design, you can create more organized & engaging content that helps guide users through your site.

Tags are Rectangular

When creating tags using CSS, one of the most common shapes is rectangular. This is because the default shape of a <span> or <div> element is a rectangle, & it's easy to style these elements to create rectangular tags.

To create a rectangular tag, you can use the same code as before:

<span class="tag">CSS</span>
.tag {
  display: inline-block;
  background-color: #eee;
  color: #333;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}

By default, this will create a rectangular tag with squared corners. However, you can easily modify the shape of the tag by adjusting the border-radius property in your CSS. For example, to create a tag with slightly rounded corners, you could do this:

.tag {
  display: inline-block;
  background-color: #eee;
  color: #333;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
}

This will create a tag with corners that are rounded by 5 pixels. You can adjust the border-radius value to make the corners more or less rounded, depending on your preference.

Note -: Rectangular tags are a versatile & popular choice for many web design projects, as they are easy to create & customize, & they work well with a variety of content types & styles.

Colored Tags

In addition to changing the shape of tags, you can also use CSS to change their color. This is a great way to make tags more visually appealing & to help them stand out on the page.

To change the color of a tag, you can use the background-color & color properties in your CSS. For example:

.tag {
  display: inline-block;
  background-color: #ff0000;
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
}

In this example, the tag will have a red background color & white text. You can use any valid CSS color value for these properties, including hex codes, RGB values, or color names.

You can also use different colors for different types of tags to help categorize them or to convey different meanings. For example, you might use red tags for important or urgent information, green tags for positive or successful messages, & blue tags for general information or neutral content.

Here's an example of how you could create different colored tags:

<span class="tag tag-red">Urgent</span>
<span class="tag tag-green">Success</span>
<span class="tag tag-blue">Info</span>
.tag {
  display: inline-block;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
}
.tag-red {
  background-color: #ff0000;
  color: #fff;
}

.tag-green {
  background-color: #00ff00;
  color: #000;
}
.tag-blue {
  background-color: #0000ff;
  color: #fff;
}

In this example, the tag class defines the basic styles for all tags, while the tag-red, tag-green, & tag-blue classes define the specific colors for each type of tag.

Note -: Using colored tags is an easy way to add visual interest & meaning to your content, & can help make your website more engaging & user-friendly.

Tag Sizes

Another way to customize tags using CSS is by changing their size. By default, tags will be the same size as the surrounding text, but you can use CSS to make them larger or smaller as needed.

To change the size of a tag, you can use the font-size property in your CSS. For example:

.tag {
  display: inline-block;
  background-color: #eee;
  color: #333;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

In this example, the tag will have a font size of 16 pixels, which is slightly larger than the default size of 14 pixels.

You can also use relative units, such as em or rem, to set the font size relative to the surrounding text. For example:

.tag {
  display: inline-block;
  background-color: #eee;
  color: #333;
  padding: 5px 10px;
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 5px;
}

In this example, the tag will be 1.2 times the size of the surrounding text. This can be useful if you want the tags to scale proportionally with the rest of the content.

You can also create different sizes of tags for different purposes. For example, you might use larger tags for main categories or important labels, & smaller tags for subcategories or less important information.

Here's an example of how you could create different sized tags:

<span class="tag tag-large">Main Category</span>
<span class="tag tag-medium">Subcategory</span>
<span class="tag tag-small">Minor Label</span>
.tag {
  display: inline-block;
  background-color: #eee;
  color: #333;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.tag-large {
  font-size: 20px;
}


.tag-medium {
  font-size: 16px;
}

.tag-small {
  font-size: 12px;
}

In this example, the tag-large, tag-medium, & tag-small classes define different font sizes for each type of tag.

Note -: Different tag sizes can help create visual hierarchy & make your content easier to navigate & understand.

Letter Tags

In addition to using tags for categorization & labeling, you can also use them to highlight individual letters or initials. This can be a fun & creative way to add some visual interest to your content.

To create letter tags, you can use the same basic HTML & CSS as before, but with a few modifications. Here's an example:

<span class="tag tag-letter">J</span>
<span class="tag tag-letter">S</span>
.tag-letter {
  display: inline-block;
  background-color: #333;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
}

In this example, the tag-letter class is used to create circular tags with a single letter inside. The tags have a dark background color, white text, & a bold font weight to make the letters stand out.

The width, height, & line-height properties are used to create a square shape for the tag, while the border-radius property is set to 50% to make the square into a circle. The text-align property is used to center the letter horizontally within the tag.

You can use letter tags in a variety of ways, such as:

Highlighting the initials of a person's name
Labeling sections of content with a single letter (e.g. "Section A", "Section B", etc.)
Creating a visual pattern or design with repeating letters

Here's an example of how you could use letter tags to highlight someone's initials:

<p>Written by <span class="tag tag-letter">J</span><span class="tag tag-letter">S</span></p>

This would create a paragraph with the text "Written by" followed by two circular tags with the letters "J" & "S" inside.

Signs

Signs are a type of tag that are larger & more prominent than regular tags. They are often used to convey important information or call attention to specific elements on a page.

To create a sign, you can use a combination of HTML & CSS to style a container element, such as a <div> or <section>, & add text & other content inside. Here's an example:

<div class="sign">
  <h2>50% Off Sale!</h2>
  <p>Use code SUMMER50 at checkout.</p>
  <a href="#" class="button">Shop Now</a>
</div>
.sign {
  background-color: #ff0000;
  color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.sign h2 {
  font-size: 36px;
  margin-top: 0;
}

.sign p {
  font-size: 24px;
  margin-bottom: 20px;
}

.button {
  display: inline-block;
  background-color: #fff;
  color: #ff0000;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #eee;
}

In this example, the sign is created using a <div> element with a red background color & white text. The sign includes a large heading, a subheading with more information, & a button that links to another page.

The CSS styles the sign with padding, a rounded border, & a box shadow to make it stand out from the rest of the content. The heading & subheading are styled with larger font sizes & margins, while the button has a white background, red text, & a hover effect.

Signs are a great way to draw attention to important information or promotions on your website. They can be used in a variety of contexts, such as:

Highlighting a sale or special offer
Promoting a new product or feature
Displaying a message or alert to users
Providing instructions or guidance

Note -: By using signs strategically throughout your website, you can help guide users to the most important content & encourage them to take specific actions.

Road Signs

Road signs are a specific type of sign that are designed to mimic the appearance of real-world road signs. They can be used on websites or in other digital content to provide directions, warnings, or other important information to users.

To create a road sign, you can use HTML & CSS to create a container element with a specific shape & style. Here's an example:

<div class="road-sign">
  <span class="road-sign-icon">&#9888;</span>
  <p>Under Construction</p>
</div>

.road-sign {
  display: inline-block;
  background-color: #ffcc00;
  color: #000;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.road-sign-icon {
  display: block;
  font-size: 48px;
  margin-bottom: 10px;
}

In this example, the road sign is created using a <div> element with a yellow background color & black text. The sign includes a warning icon (created using a Unicode character) & a text message.

The CSS styles the road sign with padding, a rounded border, & a box shadow to make it look like a real-world sign. The icon is styled with a larger font size & centered above the text.

Road signs can be used in a variety of contexts, such as:

Providing directions or wayfinding information on a website
Warning users about potential issues or errors
Indicating that a feature or section of a website is under construction or coming soon
Adding visual interest or theme to a website or application

By using road signs creatively, you can help guide users through your website & provide important information in a visually engaging way.

Here are some additional examples of road signs you could create:

<div class="road-sign stop-sign">
  <span class="road-sign-icon">&#9940;</span>
  <p>Stop</p>
</div>

<div class="road-sign yield-sign">
  <span class="road-sign-icon">&#9677;</span>
  <p>Yield</p>
</div>

<div class="road-sign detour-sign">
  <span class="road-sign-icon">&#8631;</span>
  <p>Detour</p>
</div>

.stop-sign {
  background-color: #ff0000;
  color: #fff;
}

.yield-sign {
  background-color: #ffcc00;
  color: #000;
}

.detour-sign {
  background-color: #ff9900;
  color: #000;
}

These examples show how you can create different types of road signs by changing the background color, text color, & icon. The stop sign has a red background & white text, the yield sign has a yellow background & black text, & the detour sign has an orange background & black text.

Large Signs

In addition to regular-sized signs & road signs, you can also create larger signs for more prominent or important messages. Large signs are typically used for headlines, banners, or other attention-grabbing elements on a website.

To create a large sign, you can use similar HTML & CSS techniques as before, but with larger font sizes, paddings, & other dimensions. Here's an example:

<div class="large-sign">
  <h1>Welcome to Our Website!</h1>
  <p>Discover amazing products & services.</p>
  <a href="#" class="button">Get Started</a>
</div>
.large-sign {
  background-color: #007bff;
  color: #fff;
  padding: 50px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 50px;
}
.large-sign h1 {
  font-size: 60px;
  margin-top: 0;
  margin-bottom: 20px;
}
.large-sign p {
  font-size: 36px;
  margin-bottom: 40px;
}
.large-sign .button {
  display: inline-block;
  background-color: #fff;
  color: #007bff;
  padding: 20px 40px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 28px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}
.large-sign .button:hover {
  background-color: #eee;
}

In this example, the large sign is created using a <div> element with a blue background color & white text. The sign includes a large heading, a subheading, & a button that links to another page.

The CSS styles the large sign with larger paddings, font sizes, & border radius compared to regular signs. The heading is styled with an even larger font size & margin, while the button has a white background, blue text, & a hover effect.

Large signs are great for capturing users' attention & directing them to important content or actions on your website. They can be used in a variety of contexts, such as:

Displaying a welcome message or introduction on a homepage
Promoting a featured product, service, or sale
Encouraging users to sign up, subscribe, or take another action
Providing a prominent call-to-action or next step for users

Rounded Signs

Rounded signs are a variation of regular signs that have rounded corners instead of sharp edges. They can be used to create a softer, more friendly, or more modern look for your website or application.

To create a rounded sign, you can use the same HTML & CSS techniques as before, but with a larger border-radius value to create more pronounced rounded corners. Here's an example:

<div class="rounded-sign">
  <h2>Join Our Newsletter</h2>
  <p>Get the latest news & updates delivered to your inbox.</p>
  <form>
    <input type="email" placeholder="Enter your email">
    <button type="submit">Subscribe</button>
  </form>
</div>
.rounded-sign {
  background-color: #fff;
  color: #333;
  padding: 30px;
  text-align: center;
  border-radius: 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.rounded-sign h2 {
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
}
.rounded-sign p {
  font-size: 24px;
  margin-bottom: 30px;
}
.rounded-sign input[type="email"] {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 18px;
  border-radius: 25px;
  border: none;
  margin-bottom: 20px;
}
.rounded-sign button[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 18px;
  border-radius: 25px;
  border: none;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rounded-sign button[type="submit"]:hover {
  background-color: #0062cc;
}

In this example, the rounded sign is created using a <div> element with a white background color & dark gray text. The sign includes a heading, a subheading, & a form with an email input & a submit button.

The CSS styles the rounded sign with a large border-radius value of 50 pixels, creating a fully rounded shape. The input & button elements also have rounded corners to match the overall shape of the sign.

Rounded signs can be used in a variety of contexts, such as:

Creating a more friendly or approachable look for call-to-action elements
Softening the appearance of form elements or other interactive components
Adding visual interest or contrast to a design with many sharp edges or angles

Rotating Tags

Rotating tags are a fun & interactive way to display multiple pieces of content within a single tag element. They work by cycling through a set of predefined content items at a specified interval, creating an animated effect that can capture users' attention.

To create a rotating tag, you can use HTML to define the structure of the tag & CSS to style it. Then, you can use JavaScript to dynamically update the content of the tag at regular intervals. Here's an example:

<div class="rotating-tag">
  <span class="tag-content">Tag 1</span>
</div>
.rotating-tag {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rotating-tag:hover {
  background-color: #0062cc;
}
const tagContent = ["Tag 1", "Tag 2", "Tag 3", "Tag 4"];
const tagElement = document.querySelector(".tag-content");
let currentIndex = 0;
function rotateTag() {
  currentIndex = (currentIndex + 1) % tagContent.length;
  tagElement.textContent = tagContent[currentIndex];
}
setInterval(rotateTag, 2000);

In this example, the rotating tag is created using a <div> element with a blue background color & white text. The tag contains a <span> element that will display the current content item.

The CSS styles the rotating tag with padding, a rounded border, & a hover effect. The JavaScript code defines an array of content items & selects the tag element using querySelector(). It then defines a rotateTag() function that increments the current index, wraps around to the beginning if necessary, & updates the text content of the tag element with the current item.

Finally, the setInterval() function is used to call rotateTag() every 2000 milliseconds (2 seconds), creating the rotating animation effect.

Rotating tags can be used in a variety of contexts, such as:

Displaying multiple categories or tags for a blog post or product
Showing different calls-to-action or promotions within a single banner or sign
Creating an interactive or dynamic element that engages users' attention

Spinning Tags

Spinning tags are another type of interactive tag that creates a dynamic & engaging effect. Unlike rotating tags, which cycle through a set of predefined content items, spinning tags create the illusion of a physical tag or label that is spinning in place.

To create a spinning tag, you can use HTML to define the structure of the tag & CSS to style it with a 3D transformation effect. Here's an example:

<div class="spinning-tag">
  <span class="tag-content">Exclusive</span>
</div>
.spinning-tag {
  display: inline-block;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}
.tag-content {
  display: inline-block;
  background-color: #ff9900;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 18px;
  font-weight: bold;
  transform-style: preserve-3d;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

In this example, the spinning tag is created using a <div> element with a perspective property that creates a 3D space. The tag content is placed inside a <span> element with an orange background color & white text.

The CSS styles the tag content with padding, a rounded border, & a 3D transformation effect using the transform-style property. The animation property is then used to apply a rotating animation to the tag content, using the @keyframes rule to define the animation steps.

The spin animation rotates the tag content 360 degrees around the Y-axis over a duration of 2 seconds, with a linear timing function that creates a smooth & continuous spinning effect.

Spinning tags can be used in a variety of contexts, such as:

Highlighting special offers, promotions, or exclusive content
Drawing attention to important labels or categories
Creating a playful or dynamic effect that engages users' attention

Frequently Asked Questions

Can I use multiple classes on a single tag element?

Yes, you can apply multiple classes to a single tag element by separating the class names with spaces in the class attribute. For example: <div class="tag tag-large tag-red">.

How can I create a tag with a gradient background color?

To create a tag with a gradient background color, you can use the background-image property with a linear-gradient() or radial-gradient() function. For example:

.tag {

background-image: linear-gradient(to right, #ff0000, #0000ff);

}

Can I use icons or images inside tags?

Yes, you can include icons or images inside tags by using inline elements such as <i>, <span>, or <img>. For example:

</div>

Conclusion

In this article, we have discussed the versatile and interesting world of CSS tags & how they can be used to enhance the visual appeal & functionality of your website or application. We have covered various types of tags, including rectangular, colored, sized, & letter tags, as well as more specialized variations like signs, road signs, large signs, rounded signs, rotating tags, & spinning tags.With the help of CSS & a bit of creativity, you can create engaging & informative tag elements that help guide users through your content, highlight important information, & add visual interest to your designs.

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure andAlgorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry.