Highlighting text in html using different color background by span tag

The HTML `<span>` tag is an inline element that is used to group elements together for styling purposes. It is often used to apply styles to a specific portion of text, such as changing the font, color, or background color. The `<span>` tag can also be used to group elements together for scripting purposes.

Here is the output of span tags.

Welcome to plus2net html section. Use the forum to post any query / doubts on the tutorial

Here is the code.
Welcome to <span style="background-color: #FFFF00">plus2net html</span> section.
Use the forum to post any <span style="color: #FF00FF">query / doubts</span> on the tutorial

Span tag with CSS

Let us use span tag along with CSS to define a format for text. We will keep the following code inside the head tags of our html page. This way we are creating one embedded style sheet which will affect the document only.

<STYLE TYPE="text/css">
<!--
highlighting
{
color:brown;
font-weight:900;
font-size:100%;
font-family:sans-serif;
background-color: #ffff00;

}
-->
</STYLE>
Now in our text inside the body of the page we can use this formatting where ever we want like this.

We can use style property with span to create <span class='highlighting'>formatted text</span> 
for use any where. 

Span tag with background image

We can place background image by using span tag like this.

Here we are using  style property to add 
<span STYLE="background-image: url(images/bg1.jpg)">background image to this line of text</span>
 as an example 
Output is here
Here we are using style property to add background image to this line of text as an example

Span tag with mouse hover style

We can create one span tag with title style to display any message once mouse is placed over it.

To check the
 <span title="This is the title style of span tag"><b>example place your mouse here</b></span> and wait. 
To check the example place your mouse here and wait.

Next we will see how to manage the color of the text using font tag


Bold Text tag Underline text

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer