JavaFX CSS Styling

🎨 What is JavaFX CSS?

JavaFX CSS allows you to style your applications using familiar CSS syntax. You can customize colors, fonts, sizes, and effects to create beautiful, professional-looking user interfaces with ease.


// Applying CSS styles to JavaFX components
Button styledButton = new Button("Styled Button");
styledButton.setStyle("-fx-background-color: #3498db; " +
                     "-fx-text-fill: white; " +
                     "-fx-font-size: 16px;");

Output:

CSS Styling Methods

🎯

Inline Styles

Direct styling with setStyle() method

button.setStyle("-fx-background-color: red;");

🏷️

CSS Classes

Reusable styles with CSS classes

button.getStyleClass().add("primary-btn");

📄

External CSS

Separate CSS files for styling

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

🆔

CSS IDs

Unique styling with ID selectors

button.setId("submit-button");

🔹 Inline CSS Styling

Quick styling directly in your Java code:

// Button with inline styles
Button primaryButton = new Button("Primary");
primaryButton.setStyle(
    "-fx-background-color: #2ecc71; " +
    "-fx-text-fill: white; " +
    "-fx-font-size: 14px; " +
    "-fx-padding: 10px 20px; " +
    "-fx-background-radius: 5px;"
);

Button secondaryButton = new Button("Secondary");
secondaryButton.setStyle(
    "-fx-background-color: transparent; " +
    "-fx-text-fill: #3498db; " +
    "-fx-border-color: #3498db; " +
    "-fx-border-width: 2px; " +
    "-fx-border-radius: 5px; " +
    "-fx-background-radius: 5px;"
);

// Label with custom styling
Label titleLabel = new Label("Welcome to JavaFX");
titleLabel.setStyle(
    "-fx-font-size: 24px; " +
    "-fx-font-weight: bold; " +
    "-fx-text-fill: #2c3e50;"
);

Output:

Welcome to JavaFX

🔹 External CSS Files

Organize styles in separate CSS files for better maintainability:

🔸 styles.css

/* Root styling */
.root {
    -fx-background-color: #ecf0f1;
    -fx-font-family: "Arial";
}

/* Button styles */
.primary-button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
    -fx-cursor: hand;
}

.primary-button:hover {
    -fx-background-color: #2980b9;
}

.primary-button:pressed {
    -fx-background-color: #21618c;
}

/* Text field styles */
.custom-text-field {
    -fx-background-color: white;
    -fx-border-color: #bdc3c7;
    -fx-border-width: 1px;
    -fx-border-radius: 3px;
    -fx-padding: 8px;
}

.custom-text-field:focused {
    -fx-border-color: #3498db;
    -fx-border-width: 2px;
}

🔸 Java Code

// Load external CSS file
Scene scene = new Scene(root, 400, 300);
scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

// Apply CSS classes
Button button = new Button("Click Me");
button.getStyleClass().add("primary-button");

TextField textField = new TextField();
textField.getStyleClass().add("custom-text-field");

Output:

🔹 CSS Selectors and Properties

Common JavaFX CSS selectors and properties:

/* Type selectors */
.button {
    -fx-background-color: #e74c3c;
    -fx-text-fill: white;
}

.label {
    -fx-font-size: 16px;
    -fx-text-fill: #2c3e50;
}

/* ID selectors */
#header-title {
    -fx-font-size: 28px;
    -fx-font-weight: bold;
}

#main-content {
    -fx-background-color: white;
    -fx-padding: 20px;
}

/* Class selectors */
.error-message {
    -fx-text-fill: #e74c3c;
    -fx-font-weight: bold;
}

.success-message {
    -fx-text-fill: #27ae60;
    -fx-font-weight: bold;
}

/* Pseudo-classes */
.button:hover {
    -fx-background-color: #c0392b;
}

.text-field:focused {
    -fx-border-color: #3498db;
    -fx-border-width: 2px;
}

🔸 Java Implementation

// Using ID selectors
Label headerTitle = new Label("Application Title");
headerTitle.setId("header-title");

VBox mainContent = new VBox();
mainContent.setId("main-content");

// Using CSS classes
Label errorLabel = new Label("Error: Invalid input");
errorLabel.getStyleClass().add("error-message");

Label successLabel = new Label("Success: Data saved");
successLabel.getStyleClass().add("success-message");

🔹 Advanced Styling Effects

Creating visual effects with CSS:

/* Drop shadow effects */
.card {
    -fx-background-color: white;
    -fx-background-radius: 8px;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 2);
    -fx-padding: 20px;
}

/* Gradient backgrounds */
.gradient-button {
    -fx-background-color: linear-gradient(to bottom, #3498db, #2980b9);
    -fx-text-fill: white;
    -fx-background-radius: 5px;
    -fx-padding: 10px 20px;
}

/* Border styling */
.bordered-panel {
    -fx-border-color: #bdc3c7;
    -fx-border-width: 2px;
    -fx-border-radius: 5px;
    -fx-background-color: #ffffff;
    -fx-padding: 15px;
}

/* Animation-ready styles */
.fade-button {
    -fx-opacity: 1.0;
    -fx-background-color: #9b59b6;
    -fx-text-fill: white;
}

.fade-button:hover {
    -fx-opacity: 0.8;
}

Output:

Card with Shadow

This card has a drop shadow effect

🔹 Complete Styled Application Example

Putting it all together in a real application:

public class StyledLoginApp extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        // Create UI components
        VBox root = new VBox();
        root.setId("login-container");
        
        Label titleLabel = new Label("User Login");
        titleLabel.setId("login-title");
        
        TextField usernameField = new TextField();
        usernameField.setPromptText("Username");
        usernameField.getStyleClass().add("login-field");
        
        PasswordField passwordField = new PasswordField();
        passwordField.setPromptText("Password");
        passwordField.getStyleClass().add("login-field");
        
        Button loginButton = new Button("Sign In");
        loginButton.getStyleClass().add("login-button");
        
        Button cancelButton = new Button("Cancel");
        cancelButton.getStyleClass().add("cancel-button");
        
        HBox buttonBox = new HBox();
        buttonBox.getStyleClass().add("button-container");
        buttonBox.getChildren().addAll(loginButton, cancelButton);
        
        root.getChildren().addAll(titleLabel, usernameField, 
                                 passwordField, buttonBox);
        
        // Create scene and load CSS
        Scene scene = new Scene(root, 350, 250);
        scene.getStylesheets().add("login-styles.css");
        
        primaryStage.setTitle("Styled Login");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

🔸 login-styles.css

#login-container {
    -fx-background-color: linear-gradient(to bottom, #74b9ff, #0984e3);
    -fx-padding: 30px;
    -fx-spacing: 15px;
    -fx-alignment: center;
}

#login-title {
    -fx-font-size: 24px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-padding: 0 0 10px 0;
}

.login-field {
    -fx-pref-width: 250px;
    -fx-padding: 12px;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-font-size: 14px;
}

.login-button {
    -fx-background-color: #00b894;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-padding: 10px 25px;
    -fx-background-radius: 5px;
    -fx-cursor: hand;
}

.cancel-button {
    -fx-background-color: transparent;
    -fx-text-fill: white;
    -fx-border-color: white;
    -fx-border-width: 1px;
    -fx-border-radius: 5px;
    -fx-padding: 10px 25px;
}

.button-container {
    -fx-spacing: 10px;
    -fx-alignment: center;
    -fx-padding: 10px 0 0 0;
}

🎨 What is JavaFX CSS?

Output:

CSS Styling Methods

Inline Styles

CSS Classes

External CSS

CSS IDs

🔹 Inline CSS Styling

Output:

Welcome to JavaFX

🔹 External CSS Files

🔸 styles.css

🔸 Java Code

Output:

🔹 CSS Selectors and Properties

🔸 Java Implementation

🔹 Advanced Styling Effects

Output:

Card with Shadow

🔹 Complete Styled Application Example

🔸 login-styles.css

🧠 Test Your Knowledge

Which method is used to apply inline CSS styles to a JavaFX component?