www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons Grouping Elements using <span> and <div> Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9

The HTML <span> and <div> tags are used to group and structure a document and are often used together with the attributes class and id, that we learned in the previous lesson.

Grouping with <span> Tag
The HTML <span> tag does not add anything to the document itself. But with CSS, <span> is used to add styles to specific parts of text in our HTML documents.

Here is an example:

<p>This sentence is in normal font. <span class="italic">This sentence is italicized. </span>This one is again in normal font. <span class="italic">Again an italicized sentence.</span> </p>


The following CSS code defines the 'italic' style for the <span> tag:

span.italic {
font-style:italic;
}

We can also use the HTML id attribute to add styles to the <span> elements.

Grouping with <div> Tag
Just like the <span> tag, the <div> tag also does not add anything to the HTML document itself. But with CSS, <div> is used to add styles to parts of our HTML documents. So what is the difference between <span> and <div>?

For the sake of completeness, lets first see an example and then we shall shed some light on the difference between the two:



<p>This sentence is in normal font. <div class="italic">This sentence is italicized. </div>This one is again in normal font. <div class="italic">Again an italicized sentence.</div> </p>


The following CSS code defines the 'italic' style for the <div> tag:

div.italic {
font-style:italic;
}

The output of the above example is almost identical to the example of the <span> tag we saw earlier.

Difference between <span> and <div> Tags
There is one difference between <div> and <span>. In standard HTML, a <div> is a block-level element whereas a <span> is an inline element. The <div> block visually isolates a section of a document on the page, in the same way as a paragraph. The <span> element contains a piece of information inline with the surrounding text.

So, it is recommended that when you need to style something bigger than a single line, use <div> and stick to <span> when stylling something smaller.


Our Basic CSS Tutorial ends here. How did you find it? Please let us know at pickatutorial@yahoo.com

More CSS Tutorials







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.