"Tekken 3 APK Download Best Android Fighting Game Free"
"Discuss with Us on Our Forums"
"30+ Short Love Poems For Her That Will Make Her Cry"

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

  • Using The Span Tag In CSS
    [See the full post at: Using The Span Tag In CSS]

    Reply
  •  logan

    You did the particular a great function writing and revealing the particular hidden advantageous features of

    Reply

Reply To: Using The Span Tag In CSS




<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">

CLOSE