16.5.5. CSS Styling in JavaFX

Today we will discuss how to use CSS for styling in JavaFX applications. CSS allows us to visually enhance our components. Can anyone tell me what CSS stands for?

Cascading Style Sheets!

Exactly! CSS helps us define the look and feel of our UI. Why do you think it’s beneficial to separate styles from the application logic?

I think it makes the code cleaner and easier to manage.

Right! Keeping styles separate makes our applications easier to maintain and change over time. Let’s look at a simple CSS rule.

"Here’s a quick example of CSS for a button. The syntax looks like this:

Now that we understand the syntax, how do we apply these styles in a JavaFX application? Can someone guess?

We probably need to load the CSS file in the Java code, right?

Correct! We load it using the Scene’s getStylesheets method. For example, scene.getStylesheets().add(getClass().getResource('style.css').toExternalForm());. Once that’s done, the styles will be applied. Let’s run through how this impacts our visuals.