Span is used when you want to change the properties of an object, without affecting its position. Compare this:
This is a
red text
inside a green text.
with:
This is a red text inside a green text.
In the first case, we have a div inside a div. In the second case we have a span inside a div.
The CSS code is the same, only the HTML code differs.
HTML code - Div inside a Div
HTML code - Span inside a Div
CSS code
Please see the attachments for the example code.
This is a
red text
inside a green text.
with:
This is a red text inside a green text.
In the first case, we have a div inside a div. In the second case we have a span inside a div.
The CSS code is the same, only the HTML code differs.
HTML code - Div inside a Div
Code:
<html>
<head>
<link
rel = "stylesheet"
type = "text/css"
href = "example.css"
/>
<head>
<body>
<[B]div id = "mydiv"[/B]>
This is a <[B]div id = "myspan"[/B]>red text</div> inside a green text.
</div>
</body>
</html>HTML code - Span inside a Div
Code:
<html>
<head>
<link
rel = "stylesheet"
type = "text/css"
href = "example.css"
/>
<head>
<body>
<[B]div id = "mydiv"[/B]>
This is a <[B]span id = "myspan"[/B]>red text</span> inside a green text.
</div>
</body>
</html>CSS code
Code:
[B]#mydiv[/B]
{
color : green;
}
[B]#myspan[/B]
{
color : red;
}Please see the attachments for the example code.
