Highlighting text in html using different color background by span tag
We can mark any area of a text in different color background. This way we can highlight some portion of the text. We will be using span tag in html to give color background to the text. Note that we are not using bold tag here to highlight the font in bold letters.
With Div tag
Span tag is also used along with div tag for generating power full CSS effects. We will try how we can format a particular area of text by using span tag and style sheet.
Before that let us start with an simple example. Using span tag we can mark different areas in different colors. Here is the code for a simple span tag.
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.
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
Be the first to post comment on this article :
|Click for more tutorial on Font style in web pages|