WAP CSS / WCSS Tutorial

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

1. WCSS (WAP CSS) Introduction

1.1. What is WCSS (WAP CSS)?

1.2. MIME Type and File Extension of WCSS Files

2. Wireless CSS and Wireless Profile CSS

3. Advantages of Using WAP CSS Style Sheets on Mobile Internet Sites

4. Disadvantages of Using WAP CSS Style Sheets on Mobile Internet Sites

5. Syntax Rules of WCSS

6. Comments in WCSS

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

7.1. Link to an External Cascading Style Sheet

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

7.3. Specify WCSS Styles with the Style Attribute (Inline Styles)

8. Different Types of Selectors

8.1. Type Selector

8.2. Class Selector

8.3. ID Selector

8.4. Universal Selector

9. Div and Span Element of XHTML MP

9.1. The Div Element

9.2. The Span Element

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

11. Common Types of Property Value

11.1. Length

11.2. Color

11.3. URL

12. WCSS Font and Text Properties

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

12.2. Setting the Font Size (font-size Property)

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

12.4. Setting Text Alignment (text-align and float Properties)

13. WCSS List Properties

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

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

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

14. WCSS Color Properties

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

15. WCSS Border Properties

15.1. Setting the Border Style (border-style Property)

15.2. Setting the Border Width (border-width Property)

15.3. Setting the Border Color (border-color Property)

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

15.5. Example: Applying WAP CSS Border Properties to Tables

16. WAP Specific Extensions to CSS

17. WCSS Access Key Extension

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

18. WCSS Input Extension

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

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

19. WCSS Marquee Extension

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

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

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

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

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

19.5.1. Scroll Marquee Style

19.5.2. Slide Marquee Style

19.5.3. Alternate Marquee Style

20. Matching WCSS Cascading Style Sheets to Different User Agents

20.1. How to Detect User Agents?

20.2. How to Read the Value of a HTTP Header?

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

A button for going back to the top of this page