Using CSS and FXML

Important Note

Note that this page is currently a work in progress and will be updated as more relevant information is gathered.

---

How FXML Works

FXML allows us to implement CSS files as if we were styling a html page. The actual code within the CSS file will follow the same syntax and format structure one would be used to if they had previously worked with CSS styling. Within the code, however, there needs to be changes to make sure the GUI elements are read into the CSS properly.

---

Assigning a CSS Styling Sheet to a Scene

To assign styles to a scene, we have to use the following line of code: scene.getStylesheets().add("path/stylesheet.css"); where path is the project path to the style sheet and stylesheet.css is the name of the CSS file.

CSS Rules

Using FXML with CSS, we need to remember a few important properties:

• You can define Class, ID, and descendant selectors.
• Most properties are the same but with "-fx-" prepended.

Example

The CSS rule for the exitButton in the Login Client would look like the following if it were extracted to a common stylesheet:

#LoginButton {
-fx-font-size: 20px;
-fx-font-family: 'Currier New';
-fx-text-fill: black;
-fx-base: #85C1E9;
}

Then to apply the style you would use the following within the code:

exitButton.setId("LoginButton");