Part II - Styling Application

In this tutorial we will go through a series of techniques and technologies used when styling a User Interface.

• Introduction to CSS
• Embedding CSS stylesheets in a web page
• Inline, using a style tag with type="text/ample+css"
• Referencing a resource, using a link tag with href attribute
• Using CSS for styling UI
• Namespaced selectors for styling component
• Pseudo-class selectors for styling component state
• Pseudo-element selectors for styling component content

Introduction to CSS

The CSS or Cascading Style Sheets technology is designed to take UI presentation details (presentation styles) away from UI markup. The technology proved its use in the world of web-browsers although its support has been limited for quite a while in some user agents. In Ample SDK you can use more CSS selectors than available in browsers, due to a more comprehensive approach to the UI and component styling.

It is common in the HTML world to specify element styles inline with a style attribute. Although this is possible in Ample SDK as well, we recommend avoiding such practice and using the class attribute with a corresponding style declared in a separate stylesheet.

Embedding CSS stylesheets in a web page

CSS stylesheets created to be applied to the Ample SDK UI fragments can be embedded in a web page in following ways:

Inline, using a style tag with type="text/ample+css"

<style type="text/ample+css">
        /* Ample SDK inline stylesheet */
</style>                                          

Referencing a resource, using a link tag with href attribute

<link type="text/ample+css" rel="stylesheet" href="stylesheet.css"/>
                                                

Using CSS for styling UI

Namespaced selectors for styling component

Along with XML, CSS also added a module that allows selectors to be written and matched for elements found in certain namespaces.

@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

xul|menulist {
        width: 200px;
}
                                                

In the example above, we declared a prefix xul to be bound to the http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul namespace, thus only matching the element selector to those menulist elements that are found in the xul namespace.

Pseudo-class selectors for styling component state

Pseudo-class selectors are usually used to style content in a dynamic state. Some of the pseudo-class selectors you might be familar with are hover and focus.

@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

xul|datepicker:focus {
        background-color: pink;
}
                                                

In the CSS code above we added a pink background-color to the datepicker component, to be applied when the component has focus.

Pseudo-element selectors for styling component content

Pseudo-element selectors are used to style component substructures. An example of a pseudo-element selector that you may be familiar with is first-letter.

@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

xul|colorpicker::input {
        border: solid 1px blue;
}
                                                

In the CSS code above we added a border to the input field of the XUL colorpicker component.