javafx CSS Using CSS for styling

Example

CSS can be applied in multiple places:

• inline (Node.setStyle)
• in a stylesheet
  • to a Scene
    • as user agent stylesheet (not demonstrated here)
    • as "normal" stylesheet for the Scene
  • to a Node

This allows to change styleable properties of Nodes. The following example demonstrates this:

Application class

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class StyledApplication extends Application {

    @Override
    public void start(Stage primaryStage) {
        
        Region region1 = new Region();
        Region region2 = new Region();
        Region region3 = new Region();
        Region region4 = new Region();
        Region region5 = new Region();
        Region region6 = new Region();
        
        // inline style
        region1.setStyle("-fx-background-color: yellow;");
        
        // set id for styling
        region2.setId("region2");
        
        // add class for styling
        region2.getStyleClass().add("round");
        region3.getStyleClass().add("round");
        
        HBox hBox = new HBox(region3, region4, region5);
        
        VBox vBox = new VBox(region1, hBox, region2, region6);

        Scene scene = new Scene(vBox, 500, 500);
        
        // add stylesheet for root
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        
        // add stylesheet for hBox
        hBox.getStylesheets().add(getClass().getResource("inlinestyle.css").toExternalForm());
        
        scene.setFill(Color.BLACK);
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

inlinestyle.css

* {
    -fx-opacity: 0.5;
}

HBox {
    -fx-spacing: 10;
}

Region {
    -fx-background-color: white;
}

style.css

Region {
    width: 50;
    height: 70;
    
    -fx-min-width: width;
    -fx-max-width: width;
    
    -fx-min-height: height;
    -fx-max-height: height;
    
    -fx-background-color: red;
}

VBox {
    -fx-spacing: 30;
    -fx-padding: 20;
}

#region2 {
    -fx-background-color: blue;
}