9.2. The Span Element
The <span> element is used in the same way as the <div> element. The difference is that the <div> element is used to enclose one or more block elements (e.g. <p>, <h1> to <h6>, <table>, etc) while the <span> element is used to enclose a section (e.g. some text) in a block element.
The usage of the <span> tag is illustrated in the following two XHTML MP/WAP CSS examples. Both XHTML MP/WAP CSS examples give the same result in mobile phone browsers. The first example and the second example demonstrate the use of the <span> tag with the class attribute and the style attribute respectively.
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<style
type="text/css">
.wcss_class {
color:
blue
}
</style>
<title>WCSS
Tutorial</title>
</head>
<body>
<h1><span
class="wcss_class">Table of
Contents</span></h1>
<hr/>
<p>
<span
class="wcss_class">WCSS Tutorial</span>
Chapter 1<br/>
<span class="wcss_class">WCSS
Tutorial</span> Chapter 2<br/>
<span
class="wcss_class">WCSS Tutorial</span>
Chapter 3<br/>
</p>
</body>
</html>
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WCSS
Tutorial</title>
</head>
<body>
<h1><span
style="color: blue">Table of
Contents</span></h1>
<hr/>
<p>
<span
style="color: blue">WCSS Tutorial</span>
Chapter 1<br/>
<span style="color:
blue">WCSS Tutorial</span> Chapter
2<br/>
<span style="color: blue">WCSS
Tutorial</span> Chapter
3<br/>
</p>
</body>
</html>
In the above two examples, the WCSS style rule "color: blue" is applied to the text enclosed in the <span></span> tags. The text outside <span></span> tags remains in its default color, that is black. The screenshots of the examples in mobile phone browsers are shown here:
|
|
|
| Previous Page | Page 12 of 39 | Next Page |  |
- 1. WCSS (WAP CSS) Introduction
- 2. Wireless CSS and Wireless Profile CSS
- 3. Advantages of Using WAP CSS Style Sheets on Mobile Internet Sites
- 4. Disadvantages of Using WAP CSS Style Sheets on Mobile Internet Sites
- 5. Syntax Rules of WCSS
- 6. Comments in WCSS
- 7. How to Apply WCSS Styles to an XHTML MP Document
- 8. Different Types of Selectors
- 9. Div and Span Element of XHTML MP
- 10. Cascading Rules for Handling Multiple Groups of WCSS Styles Applied to the Same Element
- 11. Common Types of Property Value
- 12. WCSS Font and Text Properties
- 13. WCSS List Properties
- 14. WCSS Color Properties
- 15. WCSS Border Properties
- 16. WAP Specific Extensions to CSS
- 17. WCSS Access Key Extension
- 18. WCSS Input Extension
- 19. WCSS Marquee Extension
- 20. Matching WCSS Cascading Style Sheets to Different User Agents