WAP CSS / WCSS Tutorial

Preferences - Do not show ads

WCSS (WAP CSS, also known as Wireless CSS or Wireless Profile CSS) is the cascading style sheet language that is used with XHTML MP. It is based on CSS2. Like XHTML MP, WCSS is defined in WAP 2.0.

At the beginning of our WCSS tutorial, we will mention about what WCSS is, the advantages and disadvantages of using WCSS on your WAP site, WCSS's syntax, etc. After that we will look at different ways to apply WCSS cascading style sheets to XHTML MP documents, WCSS selectors, and some of the commonly used WCSS properties. The last part of our WCSS tutorial includes an in depth coverage of the three WAP specific extensions to CSS2 and a brief discussion of how to detect the type of a user agent and apply the appropriate WCSS style sheet to it.

Table of Contents

WCSS (WAP CSS) Introduction

What is WCSS (WAP CSS)?

MIME Type and File Extension of WCSS Files

Wireless CSS and Wireless Profile CSS

Advantages of Using WAP CSS Style Sheets on Mobile Internet Sites

Disadvantages of Using WAP CSS Style Sheets on Mobile Internet Sites

Syntax Rules of WCSS

Comments in WCSS

How to Apply WCSS Styles to an XHTML MP Document

Link to an External Cascading Style Sheet

Place WCSS Styles at the Document Head (Internal Style Sheet)

Specify WCSS Styles with the Style Attribute (Inline Styles)

Different Types of Selectors

Type Selector

Class Selector

ID Selector

Universal Selector

Div and Span Element of XHTML MP

The Div Element

The Span Element

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

Common Types of Property Value




WCSS Font and Text Properties

Setting Specific Font Names or Generic Font Family Names (font-family Property)

Setting the Font Size (font-size Property)

Setting the Font Style: Italic, Bold and Underline (font-style, font-weight and text-decoration Properties)

Setting Text Alignment (text-align and float Properties)

WCSS List Properties

Changing the Bullet Shape of Unordered Lists (list-style-type Property)

Changing the Sequence Value Type of Ordered Lists (list-style-type Property)

Using Image Files as List Bullets (list-style-image Property)

WCSS Color Properties

Setting Foreground and Background Colors (color and background-color Properties)

WCSS Border Properties

Setting the Border Style (border-style Property)

Setting the Border Width (border-width Property)

Setting the Border Color (border-color Property)

Shorthand Properties for Setting Border Style, Width and Color All at Once

Example: Applying WAP CSS Border Properties to Tables

WAP Specific Extensions to CSS

WCSS Access Key Extension

Specifying Keypad Shortcuts for Elements (-wap-accesskey Property)

WCSS Input Extension

Controlling the Type and Number of Characters to be Entered in Text Fields (-wap-input-format Property)

Controlling Whether Text Fields can be Left Empty (-wap-input-required Property)

WCSS Marquee Extension

Enabling Content Scrolling Across the Screen of Mobile Devices (-wap-marquee Property Value)

Controlling the Direction of Marquee Animations (-wap-marquee-dir Property)

Repeating the Marquee Animation a Number of Times (-wap-marquee-loop Property)

Controlling the Speed of Marquee Animations (-wap-marquee-speed Property)

Controlling the Style of Marquee Animations (-wap-marquee-style Property)

Scroll Marquee Style

Slide Marquee Style

Alternate Marquee Style

Matching WCSS Cascading Style Sheets to Different User Agents

How to Detect User Agents?

How to Read the Value of a HTTP Header?

How to Match WCSS Cascading Style Sheets to Different User Agents?