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
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
Length
Color
URL
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?
|
