Cascading Style Sheets (CSS)
The Mobile Application Platform framework supports the Cascading Style Sheets level 3 (CSS3) specification of the World Wide Web Consortium (W3C). According to W3C at the time of this writing:
“CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document.”
See www.w3.org for more information.
As a result, CSS enables you to separate the presentation style of a web or mobile application page from the information that appears on a page and the logic that runs on the page.
The description of the styling information is contained in a CSS document or file with a .CSS extension.
Note: In this documentation the term CSS refers to CSS3 style constructs and/or the file or files that contain the defined constructs.
CSS Types and Sources in the Mobile Application Platform
In the Mobile Application Platform the CSS styles you use in a mobile application can be:
|
Field or Control |
Definition |
|---|---|
| System-generated |
When you create a layout template or sub-template in the Template Designer, the system generates a CSS file from the container metadata upon save. |
| Manually-coded |
You can manually code and add CSS to templates and sub-templates in the Template Designer. You can also manually code and add CSS to layouts in the Layout Designer. |
| Uploaded |
You can add CSS to application pages in the Layout Designer. You can define CSS you add in the Layout Designer as a file or inline within the generated HTML. When you add CSS to a layout using the file option, it is pushed to the web server as a file and referenced in the generated HTML as a link. CSS added with the file option, the CSS will be pushed to the web server as a file and referenced in the generated HTML as a link. |
Order of Precedence for Applying CSS
The order of precedence for how the system applies CSS to application pages at runtime is as follows:
|
Order |
Source |
Component |
Type |
|---|---|---|---|
|
1 |
Layout |
Layout Designer |
Manually coded. |
|
2 |
Layout |
Layout Designer |
Manually coded defined as a file. |
|
3 |
Layout template |
Template Designer |
System generated in the Template Designer from template container metadata |
|
4 |
Layout template |
Template Designer |
Manually added to a template in the Template Designer. |
|
5 |
Layout sub-template |
Template Designer |
System generated in the Template Designer from sub-template container metadata. |
|
6 |
Layout sub-template |
Template Designer |
Manually coded. |