Tuesday, 29 January 2013

span and div tags


Span and div tags in HTML:
                The SPAN and DIV elements are very useful when dealing with Cascading Style Sheets. People tend to use the two elements in a similar fashion, but they serve different purposes.

<span> tag:
A <span> element used to color a part of a text:
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.

  • Affecting the Text's Background Color:
<SPAN STYLE="background-color: #ffffcc">Here's What You Get</SPAN>
  • Affecting Text Color and Size:
            <SPAN STYLE="color: green; font-size: 10pt">Here's What You Get</SPAN>
  • Adding A Background Image to the Text:
<SPAN STYLE="background-image: url(/img/background2.gif)">Here's What You Get</SPAN>

The <span> tag is supported in all major browsers.
Ex:
<html>
<body>

<p>this is about <span style="color:blue;font-weight:bold">blue</span> color and also about the  <span style="color:darkgreen;font-weight:bold">dark green</span>colors.</p>

</body>
</html>
o/p:
this is about blue color and also about the dark green colors.


<Div> tag
            To use the DIV element, simply surround the area of your page that you want as a separate division with the <div> and </div> tags:

<div id="mydiv">
<p>contents of div</p>
</div>
The DIV element gives you the chance to define the style of whole sections of the HTML. You can define a division of your page as a call out and give that area a different style from the surrounding text. That area could have images, paragraphs, headlines, anything you wanted. 

Ex:
<html>
<body>

<p>This is some text.</p>

<div style="color:#0000FF">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text.</p>

</body>
</html>

o/p:
This is some text.

This is a heading in a div element

This is some text in a div element.
This is some text.

The primary attributes of the DIV element are:

style: Formats the contents of the element according to the listed style.

class: Assigns a class name or names to the element. Classes are typically used with Cascading Style Sheets

id: Formats the contents of the tag according to the style id. Note: IDs must be unique within a document.