7. How to Apply WCSS Styles to an XHTML MP Document

There are three ways to apply WCSS styles to an XHTML MP document:

  1. Link to an external cascading style sheet

  2. Place WCSS styles at the document head

  3. Specify WCSS styles with the style attribute

To separate WCSS styles and the XHTML MP document, you should employ the first way. For the second and the third way, WCSS styles are placed inside an XHTML MP document and you cannot enjoy the benefits of separating the content and the presentation information as discussed earlier at "Advantages of Using WAP CSS Style Sheets on Mobile Internet Sites" in this WAP CSS tutorial.


7.1. Link to an External Cascading Style Sheet

The <link> element is used to reference to an external cascading style sheet. The <link> element should be put at the document head of an XHTML MP document. Its syntax is like this:


<link href="url_of_style_sheet" rel="stylesheet" type="text/css"/>


The href attribute specifies the URL to the WAP CSS style sheet. There is no need to change the values assigned to the rel attribute and the type attribute. (In case you want to know, the rel attribute specifies the relation between the XHTML MP document and the document referred to by the href attribute, and the type attribute specifies the MIME type of the document referred to by the href attribute.)

The following XHTML MP/WCSS example demonstrates how to link to an external style sheet in an XHTML MP document:


(linkToWCSSFileEg1.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="linkToWCSSFileEg1.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>


(linkToWCSSFileEg1.css)

hr {
  color: blue
}

p {
  font-style: italic
}


In the external style sheet of the above example, we specify the color of the horizontal rule to blue and the font style of the text in the paragraph to italic. Here is what you will see in mobile phone browsers:






Sony Ericsson T610





Nokia Mobile Browser 4.0


An XHTML MP document can reference to more than one external style sheet. To achieve this, just add multiple <link> elements to the document head. This XHTML MP/WCSS example demonstrates how to link to multiple external style sheets:


(linkToWCSSFileEg2.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="linkToWCSSFileEg1.css" rel="stylesheet" type="text/css"/>
    <link href="linkToWCSSFileEg2.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>


(linkToWCSSFileEg2.css)

h1 {
  color: white;
  background-color: black
}


In the above XHTML MP/WCSS example, the external cascading style sheet "linkToWCSSFileEg2.css" sets the text color and the background color of level-1 headings to white and black respectively. The result of the example in mobile phone browsers is shown here:






Sony Ericsson T610





Nokia Mobile Browser 4.0


Previous Page Page 4 of 39 Next Page


Feedback Form (Expand)

What do you think about this web page?
WCSS Tutorial - Table of Contents WCSS Tutorial - Contents at a Glance Preferences - Light mode / Dark mode Preferences - Do Not Show Ads Previous Page Next Page