Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Use of Span tag

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 268
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: