9. Div and Span Element of XHTML MP

Preferences - Do not show ads

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

Contents at a Glance (Click Here for Full Table of Contents)
Print this Web Page | | Back to Top

Feedback Form (Expand)

What do you think about this web page?






 WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page
Home | Acknowledgements | Advertise with Us | Contact Us / Feedback | Glossary | Preferences
© 2004-2020 | Copyright Notice | Privacy Policy | Terms of Use