JavaFX: Applying CSS style to a scene

This entry is part 43 of 55 in the series JavaFX

Instead of using the default styles provided by JavaFX, we can create an entirely different look and feel for the application.

For now, we work out a  simple style sheet named style.css that specifies the font to use for the text and the background color and we apply them to the scene instead of individual elements such as the button or the text.

    -fx-background-color: lightblue;
    -fx-font-family: "serif";
    -fx-base: #000000;
    -fx-font-size: 24px;

As for the code, we apply the CSS style to the scene as shown below.  Note that we are applying the style to the entire application as we are using the .root style class.

package javafxapplication13;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;

public class JavaFXApplication13 extends Application {

    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 500, 300);

        Label lb = new Label("Stay Calm And Keep Learning");
        Image image = new Image(getClass().getResourceAsStream("cloud.jpg"));
        lb.setGraphic(new ImageView(image));


    public static void main(String[] args) {



Series Navigation<< JavaFX: The default theme
JavaFX: Applying CSS styles to individual elements >>

Leave a comment

Leave a Reply