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

Home Forums Using The Span Tag In CSS

This topic contains 1 reply, has 2 voices, and was last updated by  Stylebizz 3 years, 7 months ago.

  • Author
    Posts
  • #36554 Reply

    Stylebizz
    Member

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

  • #36555 Reply

    logan

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

Reply To: Using The Span Tag In CSS
Your information:





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