Badges in CSS

In CSS, you can create badges that are used to display small amounts of information, such as notifications, alerts, or counts. Here’s an example of how to create a basic badge using CSS:

HTML:

				
					<span class="badge">5</span>

CSS:

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

This CSS applies the following styles to the badge:

The display property is set to inline-block to make sure the badge is displayed in a single line, and not a block element.
The padding property adds padding around the badge content to give it some breathing space.
The background-color property sets the background color of the badge to red.
The color property sets the text color of the badge to white.
The font-size property sets the size of the badge text to 14 pixels.
The border-radius property rounds the corners of the badge to create a softer, more aesthetically pleasing effect.

You can further customize badges by adding hover effects, changing the font family, adjusting the positioning, and more. Additionally, you can use CSS to create different types of badges, such as pill-shaped badges or badges with icons.

if you want high level industrial training on this technology click this link