Create User Interfaces - JavaFX: Developing Rich Internet Applications - page 100

the node's style variable. Lastly, you can include the CSS class in the node's
styleclass variable. Listing 5.5 shows a style sheet that uses a CSS ID selector.

Listing 5.5 Style Sheet CSS ID Selector

/* MyStyle.css *./
"javafx.scene.text.Text"#MainText {
fill: navy;
font:bold italic 35pt "sans-serif";
}

This creates a CSS ID selector for the JavaFX Text class, named MainText . The
fill is navy blue with a bold italic sans serif font. To use this in JavaFX, include
the style sheet URL in the Scene object literal and add an ID to the Text display
node to match the ID declaration. Listing 5.6 demonstrates how this is done.

Listing 5.6 JavaFX Class Using Node ID to Match the CSS ID in the Style Sheet

/* Main.fx */
Stage {
title: "Style Sheet Demo"
width: 500
height: 80
scene: Scene {
stylesheets: ["{__DIR__}MyStyle.css"]
content: Text {
id: "MainText"
x: 10, y: 30
content: "This shows my style"
}
}
}

This Text node is created with an ID to match the style sheet's ID selector,
"MainText" . When run, this displays the text in bold italic sans serif font with a
size of 35 points (see Figure 5.6).

Figure 5.6 Using Style Sheets