Components and Skinning - JavaFX 1.2 Application Development - page 145

F Rectangle—the CSS engine injects two styles into the Rectangle instance. The
rectangle inherits default style defined by CSS type selector Rectangle{} in the
CSS file. In addition, the rectangle receives the styles defined by CSS class selector
.broad because its styleClass property is set to "broad" .
F Line—the Line instance is styled using CSS class selector .broad because its
styleClass property is set to "broad" .
F Text 1 —the first text with content "External CSS" is styled using the CSS ID
selector rule. The CSS engine applies styles defined for ID selector #titleText
to the node instance with id="titleText" .
F Text 2 —the text with content "Pay Attention!" is styled using the CSS class
selector .specialText by setting the property styleClass to "specialText" .
F Text 3 —the last Text node receives its styles by default due to the CSS type selector
Text{} defined in the CSS file.
The last and most important thing to note in the code is the way the CSS file is attached to
the application. This is done by setting the property Scene.stylesheets to a sequence
of the locations of the CSS files. In our example, the stylesheet is specified with the next
code snippet:
Stage {
Scene {
stylesheets :["{__DIR__}main.css"]
}
}
Now, let's examine the CSS file. Similar to W3C's stylesheet definition, JavaFX style declarations
are made up of style selectors, followed by a rule block, which contains the style properties.
In JavaFX, the selector can match a JavaFX class name, a node id property, or a node's
styleClass property. In our previous example, the CSS file main.css defines all of our
style selectors. Let's take a look:
F Type selector —the CSS file has several type selectors including Scene , Rectangle ,
Circle , and Text . When JavaFX nodes are being rendered, the CSS engine will
apply the styles that match instances of JavaFX types with the same name. You can
use the type's full name in the CSS file when defining the selector block.
F ID selector —in the CSS file, we have the #titleText selector block defined. This
declaration defines a style using the ID selector rule. Only the node with property
id="specialText" will receive styles defined by this selector.
F CSS class selector —the CSS file contains two CSS class selector definitions
including .specialText and .broad . The styles defined by these selectors
will be applied to any node instance that has its property styleClass set to
"broad" or "specialText" .