Applying CSS

By default, JavaFX uses the style sheet that comes with the distribution jar file. To override the default style, you can add a style sheet to the scene using the getStylesheets() method:

scene.getStylesheets().add("/mystyle.css");

The mystyle.css file has to be placed into the src/main/resources folder. Let's do it and add the mystyle.css file with the following content to the HelloWorld example:

#text-hello {
  :fx-font-size: 20px;
   -fx-font-family: "Arial";
   -fx-fill: red;
}
.button {
   -fx-text-fill: white;
   -fx-background-color: slateblue;
}

As you can see, we would like to style the button node and the Text node that has an ID text-hello in a certain way. We also have to modify the HelloWorld example by adding the ID to the Text element and the style sheet file to the scene:

Text txt = new Text("Hello, world!");
txt.setId(&quot...