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>
<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:
No comments:
Post a Comment