Span tag plays a very important role in HTML, CSS designing.It is used to provide beautiful,attracting,as desired features to the attributes using CSS.
SPAN tag is a tag using which attributes can be implemented.
There many tags but we mostly use span tag when we want to add effects using CSS becsuse it doesn't affect the text at all. It is there only to carry with it other attributes to affect the text, the image etc.
In any paragraph you want to add any CSS style to a particular text or line you can use span tag like you can see few examples of adding CSS feautres in the SPAN tag.
Example 1: Affecting the Text's Background Color Without affecting the whole paragraph:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span STYLE="background-color: #ffffcc"> Lorem Ipsum</span>has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.</p>
Example 2:Affecting Text Color:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span STYLE="color: green;">Lorem Ipsum</span>
has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.</p>
Example 3:Affecting font-size:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span STYLE="font-size: 10px;"> Lorem Ipsum</span>has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.</p>
Example 4:Adding A Background Image to the Text:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span STYLE="background-image: url(/img/textbg.png)"> Lorem Ipsum</span>has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book.</p>
Example 5:Using the Class and ID:
In this example i have used span tag to provide affect to a text using Id name NEWTEXT and a line using Class name NEW.
css style property
.new{color:green;font-size:12px;}
#newtext{color:red;background-color:yellow;}
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<span Id="newtext"> Lorem Ipsum</span>has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book.
<span class="new">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.</span></p>
0 Comment(s)