Styling with CSS in JavaFX

Introduction

JavaFX allows you to style the user interface (UI) components using Cascading Style Sheets (CSS), just like how it's done for web development. CSS helps in separating the design and structure of your JavaFX applications, making it easier to manage the look and feel of your UI elements.

In this tutorial, we will explore how to apply CSS styles to JavaFX applications, including how to link an external CSS file and apply styles directly within JavaFX components.

Setting Up CSS in JavaFX

To use CSS in JavaFX, we need to create a CSS file and link it to our JavaFX application. CSS in JavaFX is used to style various components such as buttons, text fields, labels, and other UI elements.

Step 1: Create a Simple JavaFX Application

First, let's create a simple JavaFX application with a button and a label that we will style using CSS.

          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Button;
          import javafx.scene.control.Label;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;
      
          public class JavaFXCSSExample extends Application {
              public static void main(String[] args) {
                  launch(args);
              }
      
              @Override
              public void start(Stage primaryStage) {
                  // Create a label and button
                  Label label = new Label("Hello, JavaFX!");
                  Button button = new Button("Click Me");
      
                  // Add button and label to layout
                  StackPane root = new StackPane();
                  root.getChildren().addAll(label, button);
      
                  // Create a scene
                  Scene scene = new Scene(root, 300, 200);
      
                  // Set the CSS file for the scene
                  scene.getStylesheets().add("styles.css");
      
                  // Set up the stage
                  primaryStage.setTitle("JavaFX CSS Example");
                  primaryStage.setScene(scene);
                  primaryStage.show();
              }
          }
        

In this code:

• A simple JavaFX application is created with a Label and a Button.
• The StackPane layout is used to position the components.
• The styles.css file is added using the scene.getStylesheets().add() method to apply CSS styling.

Step 2: Create the CSS File

Next, let’s create a CSS file named styles.css to style the JavaFX components. In this file, we will define the appearance of the Button and Label controls.

          /* styles.css */
          .label {
              -fx-font-size: 24px;
              -fx-text-fill: blue;
          }
      
          .button {
              -fx-background-color: lightgreen;
              -fx-font-size: 18px;
              -fx-border-radius: 5px;
              -fx-padding: 10px 20px;
          }
      
          .button:hover {
              -fx-background-color: green;
          }
        

In this CSS file:

• The .label class styles the Label control with a font size of 24px and a blue text color.
• The .button class styles the Button control with a light green background, a font size of 18px, rounded corners, and padding around the text.
• The .button:hover class changes the button's background color to green when the mouse hovers over it.

Step 3: Link the CSS File to the JavaFX Application

In the JavaFX application (from Step 1), the CSS file is linked using the following line of code:

          scene.getStylesheets().add("styles.css");
        

This line tells JavaFX to load the styles.css file, which contains the styles for the components in the scene.

Step 4: Running the Application

Once the CSS file is linked, you can run the JavaFX application. When you run the application, you should see the Label with blue text and the Button with a light green background. When you hover over the button, its background color should change to green.

Conclusion

In this tutorial, we covered:

• How to link an external CSS file in a JavaFX application.
• How to style JavaFX components like buttons and labels using CSS.
• How to apply CSS styles to customize the appearance of your JavaFX application.