9. Div and Span Element of XHTML MP

Sometimes you may want to apply WCSS styles to a section of an XHTML MP document or to part of the text in a paragraph. For example, you may want to highlight a word in a sentence. The <div> element or the <span> element can help you in such situations.


9.1. The Div Element

<div> is a useful element that helps you apply WCSS styles to a group of block elements (some examples of block elements are <p>, <h1> to <h6>, <table>) in an XHTML MP document.

The <div> tag is simple to use. The first step is to find those block elements that you want some WCSS style rules to be applied to and enclose them within the <div></div> tags. The next step is to apply the WCSS style rules to the <div> element. Typically, one of the following two ways is used to do this:

  1. Applying WCSS style rules using a class selector or an id selector

  2. Applying WCSS style rules using the style attribute

Using a class selector or an id selector is preferred as using the style attribute will cause the mixing of WCSS style rules with the XHTML MP markup.

The usage of the <div> tag is illustrated in the following two XHTML MP/WAP CSS examples. The first example demonstrates the use of <div> with a class selector and the second one demonstrates the use of <div> with its style attribute. Both XHTML MP/WAP CSS examples give the same result in mobile phone browsers.


(divEg1.xhtml)

<?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>
    <div class="wcss_class">
      <h1>Table of Contents</h1>
      <hr/>
      <p>
        WCSS Tutorial Chapter 1<br/>
        WCSS Tutorial Chapter 2<br/>
        WCSS Tutorial Chapter 3<br/>
      </p>
    </div>
  </body>
</html>


(divEg2.xhtml)

<?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>
    <div style="color: blue">
      <h1>Table of Contents</h1>
      <hr/>
      <p>
        WCSS Tutorial Chapter 1<br/>
        WCSS Tutorial Chapter 2<br/>
        WCSS Tutorial Chapter 3<br/>
      </p>
    </div>
  </body>
</html>


In the above two examples, the WAP CSS style rule "color: blue" is applied to all the XHTML MP elements enclosed in <div></div> tags, i.e. <h1>, <hr> and <p>. The screenshots of the XHTML MP/WAP CSS examples in mobile phone browsers are shown below:






Sony Ericsson T610





Nokia Mobile Browser 4.0


Previous Page Page 11 of 39 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.