10. Cascading Rules for Handling Multiple Groups of WCSS Styles Applied to the Same Element

In an XHTML MP document, there may exist places where multiple groups of WCSS styles are applied to the same element. In such cases, the WAP browser will "cascade" (combine) different groups of WCSS styles. The key cascading rule is that if the same WAP CSS property is applied to the same element multiple times, the one that is specified later in the XHTML MP document will overwrite earlier ones.

The cascading rule for handling multiple groups of WCSS styles is the same no matter you use external style sheets, internal style sheets or inline styles.

Let's see some examples that illustrate WAP CSS's cascading rule. The contents of the two WAP CSS style sheets cascadingRules1.css and cascadingRules2.css are shown below. Both WAP CSS style sheets contain style rules specified to the paragraph tag <p>. Note that the style rules are in conflict: one style rule tells the mobile phone browser to display the text enclosed within <p></p> tags in blue, while the other one tells the mobile phone browser to display it in red.

(cascadingRules1.css)

p {
font-style: italic;
color: blue
}

(cascadingRules2.css)

p {
color: red
}

In the following XHTML MP document, we make use of the <link> tag to reference to the above two WAP CSS cascading style sheets.

(cascadingRulesEg1.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>
    <link href="cascadingRules1.css" rel="stylesheet" type="text/css"/>
    <link href="cascadingRules2.css" rel="stylesheet" type="text/css"/>
    <title>WCSS Tutorial</title>
  </head>

  <body>
      <h1>Table of Contents</h1>
      <hr/>
      <p>
        WCSS Tutorial Chapter 1<br/>
        WCSS Tutorial Chapter 2<br/>
        WCSS Tutorial Chapter 3<br/>
      </p>
  </body>
</html>

The result of the above XHTML MP/WCSS example in mobile phone browsers is shown here:

Sony Ericsson T610

Nokia Mobile Browser 4.0

As you can see, the paragraph text in the above XHTML MP/WCSS example is displayed in red color in the mobile phone browsers. This is due to the fact that the cascading style sheet cascadingRules2.css is specified later than the cascading style sheet cascadingRules1.css in the document. So, the style rule "color: red" in cascadingRules2.css overrides "color: blue" in cascadingRules1.css. The resulting style sheet after cascading (merging) is:

p {
font-style: italic;
color: red
}

Let's see another example. In this example, we make reference to the WAP CSS cascading style sheet cascadingRules2.css first in the XHTML MP document. The markup code is shown below:

(cascadingRulesEg2.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>
    <link href="cascadingRules2.css" rel="stylesheet" type="text/css"/>
    <link href="cascadingRules1.css" rel="stylesheet" type="text/css"/>
    <title>WCSS Tutorial</title>
  </head>

  <body>
      <h1>Table of Contents</h1>
      <hr/>
      <p>
        WCSS Tutorial Chapter 1<br/>
        WCSS Tutorial Chapter 2<br/>
        WCSS Tutorial Chapter 3<br/>
      </p>
  </body>
</html>

Here is the result of the above XHTML MP/WCSS example in mobile phone browsers:

Sony Ericsson T610

Nokia Mobile Browser 4.0

As you can see, the text of the paragraph in the above XHTML MP/WCSS example is displayed in blue color in mobile phone browsers. The style rule "color: blue" overrides "color: red" since we specify the WAP CSS file cascadingRules1.css later than cascadingRules2.css in the document. The resulting style sheet after cascading is:

p {
font-style: italic;
color: blue
}

Now let's have a look at another example. The following example is the same as the previous example, except that the WAP CSS file cascadingRules2.css has been replaced with an internal style sheet. This example will generate the same result as our previous example if you try it in a mobile phone browser. It illustrates that the result of cascading depends on the order that a style rule appears in an XHTML MP document, but has nothing to do with the type of style sheet used (external style sheet, internal style sheet, or inline style).

(cascadingRulesEg3.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">
      p {
        color: red
      }
    </style>
    <link href="cascadingRules1.css" rel="stylesheet" type="text/css"/>
    <title>WCSS Tutorial</title>
  </head>

  <body>
      <h1>Table of Contents</h1>
      <hr/>
      <p>
        WCSS Tutorial Chapter 1<br/>
        WCSS Tutorial Chapter 2<br/>
        WCSS Tutorial Chapter 3<br/>
      </p>
  </body>
</html>

Page 13 of 39

Contents at a Glance (Click Here for Full Table of Contents)

Print this Web Page | | Back to Top

Feedback Form (Expand Collapse)