How to use the Span tag with CSS

Span is an inline HTML tag like a Div tag that can be used to group elements together so they can be styled or manipulated with JavaScript. In this article, I will show you how to use the span tag with CSS to make certain parts of your content distinct from the rest.

So after reading this article, you will be able to use a span tag in your web development and designing projects. Without wasting much time, let’s get started.

Span tag is similar to a Div tag. The only difference is that the span tag is an inline element while a div tag is a block element. You may see our expert guides on how to use a Div tag with CSS code snippets.

Uses of a span tag

Major uses of the span tag is styling a text with CSS code snippets and manipulating a text with JavaScript code snippets. Now, I will be showing you how to use a Span tag in two of these ways; styling and manipulating.

How to give a style to text with the span tag

If you want to give color to text that is in the same paragraph or heading in order to make it stand out from the rest, you can wrap such text in a span tag and give it a class attribute, then select it with the attribute value for styling.

From the examples below, I changed the color, background-color, and font-style of some text which is in the same paragraph by wrapping it in a span tag.

How to change some text color in a paragraph using the Span tag

				
					<p>This a text or word that I want it  to have different color from the rest within a paragraph.</p>
				
			

				
					.change-text {
      color: crimson;
   }
				
			

Let’s add the CSS code below in addition to the one above to center everything on the page:

				
					body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }
				
			

Here is the result.

How to add a background to texts with a Span tag

Span tag also helps you give a background to texts or group of word with the help of CSS code in order to grab readers’ attention. Below is how to do it.

				
					<p>
      These texts or words were given a background of green color  in order for them to be perfectly
      seen or grab the attention of readers.
</p>
				
			

Let me add a background to a ”green-background” class attribute above.

				
					.green-background {
        background-color: green;
      }
				
			

Below image is the result.

How to change font style of a text with a span tag

Span tag help web developers/designers and content creators to quickly change the style of text on a website. It can be used to change font-size, font-family, and lots more.

				
					<p>
  I want give an italic font style to these texts using a span tag  to make them appear italic to readers so that they can see them quickly.
</p>
				
			

				
					.italic-texts {
     font-style: italic ;
   }
				
			

Here is the result.

How to use a span tag with JavaScript code snippets

In this section below, I will show you how a span tag can be used with JavaScript code snippets just like we used it with CSS code snippets above.

It is going to be possible. I will manipulate our content by wrapping it in a span tag, give it an id attribute and select it by its id with JavaScript code so we can manipulate it.

From the example below, I changed some text within other text to uppercase using a span tag with JavaScript.

				
					<p>
   The texts,  Fastknowers Blog, were turned to
   upperase using a span tag with an id ''uppercase'' with JavaScript.
</p>
				
			

Let’s use JavaScript code snippet code.

				
					const uppercase = document.querySelector("#uppercase");
uppercase.style.textTransform = "uppercase";
				
			

Here is the result.

Conclusion

Span tag is one of the HTML tags that makes website development and design easier for web developers and designers and also content creator. It can be used to content and manipulate a particular piece of text with CSS and JavaScript by wrapping it in a span tag and giving it a unique class or id attribute.

Classes are used for styling with CSS code and ids for manipulation with JavaScript. If you do in such way, confusion will be avoided.

Hope this article has helped you know how to use a span tag with CSS and JavaScript code snippets. Please subscribe to our YouTube channel for more updates if you know that it is helpful. You can also find me on Facebook.