Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JavaFx CSS Style Example

1. JavaFx and Style Sheet

In JavaFx, we can apply CSS style to the nodes. For example, if we want to define a style for the buttons, the style sheet will have the selector named as ‘.button’. The same way, TextField defines a UI class in JavaFx, and the selector will be named as ‘.text-field’. Note, as text field control is a two-word class, in the selector we will have a hyphen. When defining the rules, we must prefix each rule with ‘-fx-‘. In this example, we will define style rule for a JavaFx Button.

2. About JavaFx CSS Example

The screenshot of the example is shown below:

Fig 1. About JavaFx CSS Example
Fig 1. About JavaFx CSS Example

Here, we create two Javafx Buttons separated by a Separator control. These buttons have blue background with yellow foreground and its corners are slightly curved.

3. Create JavaFx Buttons

To explore the CSS styling, we create two JavaFx buttons. Later, we will use these buttons to see how CSS styling is applied to it. Below is the code:

Fig 2. Create Buttons and Add
Fig 2. Create Buttons and Add


  1. We create JavaFx scene with a VBox container. The controls added to the VBox stays on top of each other. Means, they laid out vertically.
  2. We create two buttons and a JavaFx Separator. While we are adding these controls to the VBox, we sandwich the separator between the button 1 and button 2 so that we can avoid the button’s edges overlapping with each other.

4. Create CSS for JavaFx

We want to style the javafx button and hence we create a selector as ‘.Button’. Rule for this selector is below:

Fig 3. CSS File for the Button Style
Fig 3. CSS File for the Button Style


  1. The rule -fx-background-color defines the background colour for the button. In our case, the back colour of the button is blue.
  2. Here, we create rounded corner for the button using the rules: -fx-arc-width, -fx-arc-height. These rules define the radius of the arc and in our example, it is 2 pixels.
  3. We assign Yellow Foreground Color for the button using CSS rule -fx-text-fill.
  4. Finally, the -fx-font rule states large font for the button caption. The same rule sets the San Serif font for the button.

Now, we have CSS file ready for the JavaFx scene. Our CSS file has only one selector and you can add multiple selectors in a single file with various rule specification.

5. Assign CSS File to the JavaFx Scene

JavaFx scene maintains a observable list to hold one or more style sheets. Below is the code snippet:

Fig 4. Apply CSS File to JavaFx Scene
Fig 4. Apply CSS File to JavaFx Scene


  1. We named the CSS file as BlueButtons.css and kept it in the same location in which the source ‘.java’ file resides. Then, we load the CSS file as a resource and push it to the JavaFx Scene’s style sheet collection. We can fetch this collection by calling the getStyleSheets method. Since the style sheet contains only one selector, it will be applied to all the matching UI nodes. In our case, it is our two Button instance.
  2. Here, we show the stage and one can observe both the buttons are skinned with the style rules defined in the CSS file.

6. Code Reference

6.1 BlueButtons.css


Categories: JavaFx

Tags: , , , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.