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?
