Using The Span Tag In CSS

Tutorial # 9

Span tag is just like the div tag, which is used as a generic way of adding structure to an HTML document. But Span tag is an inline element while div tag is block level element.

For Example if you have any paragraph, then you can enclose a span tag inside the paragraph to apply any CSS rule.

<style type=”text/css”>
<!–

.Bold { font-weight: bold }

–>

</style>

 
<p>

Text

<span class=”Bold”>

Text
</span>

Text

TExt

Text
</p>

In the above code, I have included a span tag inside a paragraph with text enclosed in it and I have also called a class named as bold which makes the text bold so output of code will be

See OutPut 1

The Span TagNow note in the above results, as the span tag is an inline element no new vertical spacing is created. Now lets take a more complex example to understand it in more depth. Consider this sample code and see its output.

<html>
<head><title> Tutorial # 9 The Span Tag </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red,p {color:red}h1 {display:none}
–></style>
</head><body>

<h1 id=”red”> This is H1 Heading </h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body>

</html>

See Output 2

css example

 So Lets say what we wanted to do is to make some portion of final paragraph blue let say from text “3rd paragraph” to “with”. So this can be accomplished by simply span tag. So I am making some changes in the above code, changes are highlighted in blue color.

<html>
<head><title> Tutorial # 9 The Span Tag </title>
<style type=”text/css”>
<!–.blue {color:blue}
.change { color:blue }h1#red,p {color:red}h1 {display:none}
–>

</style>
</head>

<body>

<h1 id=”red”> This is H1 Heading </h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is <span class=”change”>3rd paragraph and this with </span> <em> new empahsized word </em> </p>
</body>

</html>

 See Output 3

using span tag

See Tutorial # 8

See Tutorial # 10

3 thoughts on “Using The Span Tag In CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>