Since Freestyle components use HTML to describe their views, it follows naturally that they should use CSS properties to style those views. To manage which CSS properties are applied to which component's views, Freestyle makes use of stylesheets.

Basics

Every Component has a list of styles. Some examples of styles are "textfield", "focused", "hover." There is no limit to the number of styles that a component may have; they can be added and removed with the addStyle() and removeStyle() methods.

Styles are used when evaluating stylesheet selectors to determine which rules in a stylesheet apply to a given component.

Stylesheets

Stylesheets in Freestyle are structured similarly to CSS stylesheets: They have rules comprised of selectors and properties. However, there are some critical differences between standard CSS stylesheets and the stylesheets used to style Freestyle components: the selector syntax, and stylesheet scope.

The reason for this divergence is that standard CSS stylesheets are designed to operate on html elements. By contrast, Freestyle sheets are designed to operate on Freestyle components, not the html elements that comprise their views.

Basic Syntax

Selectors in Freestyle sheets identify sets of Freestyle components. Consider the following rule:

It will select components with the "textfield" style(by default all TextField components), and will set their views's border style to "1px solid black".

Style selectors are conjunctive, so the rule:

will only apply to components with both the "textfield" style and the the "focused" style.

Pro Tip: The first step in understanding selectors in Freestyle is to forget everything you know about css selectors. The Freestyle selector syntax is reminiscent of standard CSS, but has very different semantics. It is incorrect to assume that your understanding of standard CSS selectors will transfer to their Freestyle equivalents.

Scope

In standard html, stylesheets are evaluated in the context of the entire document such that every element in the DOM is a candidate for selection. Freestyle however, leverages the component hierarchy to manage the complexity of styling by associating each stylesheet with a specific component, called its owner. A stylesheet's rules are only applicable to its owner and its owner's descendants. This allows for the convenient embedding of components within other components without affecting the style of other components elsewhere in the hierarchy.