VirtualMV/CSS/Formatting/Span/Content

From WikiEducator
< VirtualMV‎ | CSS‎ | Formatting‎ | Span
Jump to: navigation, search

Introduction

The < span> tag allows us to create a block in a paragraph.

VmvIcon Objective.png

Cascading Style Sheets

By the end of this page you will be able to:

  • Format part of a paragraph using the span tag

Formatting parts of a paragraph - using span

The general format of the use of span with the class attribute is:

span.class {property1:value1 : property2:value2 : ……  }


<html>
<head>
  <title>Untitled</title>
  <style>
     span.bigblue {color:blue; font-size:2em}
  </style>
</head>
<body>
<p>This is normal text.<br />
  <span class='bigblue'>This is formatted text.</span></p>
</body>
</html>

Other properties for text include: color, font-size, font-family, text-align, text-indent, line-height, margin-left, margin-right, margin-top, margin-bottom.

Examples

We can use borders to highlight specific parts of text,or create some interesting button effects For example:

border-style:dotted solid double dashed;
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed

The following examples use some webkit specific attributes (Google Chrome and Apple Safari Browsers), as well as "standard tags" being introduced in Internet Explorer version 9. Notice how some of the properties can have multiple values.

  •  Button text 
<span style="font-family: menu,Arial; border: 1px solid #0000FF; background-color: #E6F2FF;
-webkit-box-shadow: 1px 1px 2px #80FF80;
box-shadow: 1px 1px 2px #80FF80; -moz-border-radius: 3px; border-radius: 3px;
font-size: x-small">Button text</span>
  •  xxx 
<span style="font-family: menu,Arial; border: 1px solid #999999;
background-color: #E6F2FF">Menu text</span>
  • _ xxx _
_<span style="font-family: menu, Arial; background-color: #E8E8E8;
border-style: double solid none double; border-width: 1px;
-moz-border-radius: 5px 5px 1px 1px;
 border-radius: 5px 5px 1px 1px; ">Tab text</span>_