Styling With CSS

📘 JavaFX Tutorial: Using CSS Styling

🎯 Goal

In this tutorial, you will learn:

• How to create a CSS file
• How to connect it to your JavaFX app
• How to style UI components (Button, Label, etc.)

🎨 What is JavaFX CSS?

JavaFX uses a CSS system very similar to web CSS.

✅ You can style:

• Colors 🎨
• Fonts 🔤
• Sizes 📏
• Backgrounds 🧱
• Hover effects 🖱️

📁 1. Create a CSS File

Create a file inside your resources folder:

src/main/resources/org/example/testingtoturials/style.css

Example:

.root {
    -fx-background-color: #0f172a;
}

.label {
    -fx-text-fill: white;
    -fx-font-size: 16px;
}

.button {
    -fx-background-color: #3b82f6;
    -fx-text-fill: white;
    -fx-background-radius: 8;
}

.button:hover {
    -fx-background-color: #2563eb;
}

🔗 2. Connect CSS to Your Application

Modify your HelloApplication class:

Scene scene = new Scene(fxmlLoader.load(), 320, 240);

// Add this line 👇
scene.getStylesheets().add(
    HelloApplication.class.getResource("style.css").toExternalForm()
);

stage.setScene(scene);

💡 Explanation

• getStylesheets().add() loads the CSS file
• toExternalForm() converts it to a usable path

🎯 3. Styling Components

🔹 Style by Type (Global)

.button {
    -fx-font-size: 14px;
}

👉 Applies to all buttons

🔹 Style by ID

In FXML:

<Button fx:id="myButton" text="Click Me"/>

In CSS:

#myButton {
    -fx-background-color: red;
}

👉 # targets a specific element

🔹 Style by Class

In FXML:

<Button text="Save" styleClass="primary-button"/>

In CSS:

.primary-button {
    -fx-background-color: green;
}

👉 . is for reusable styles

✨ 4. Example (Full)

FXML

<VBox alignment="CENTER" spacing="20"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="org.example.testingtoturials.HelloController">

    <Label text="Welcome!" styleClass="title"/>

    <Button text="Click Me" styleClass="primary-button"/>

</VBox>

CSS

.root {
    -fx-background-color: #111827;
}

.title {
    -fx-text-fill: #f9fafb;
    -fx-font-size: 20px;
}

.primary-button {
    -fx-background-color: #10b981;
    -fx-text-fill: white;
    -fx-background-radius: 10;
}

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

🧠 Important Notes

• JavaFX CSS properties start with -fx-
• Not all web CSS properties work ⚠️
• You can inspect components using Scene Builder 👀

⚠️ Common Mistakes

• ❌ Wrong file path → CSS not applied
• ❌ Forgetting toExternalForm()
• ❌ Using normal CSS properties (like color instead of -fx-text-fill)
• ❌ Not linking CSS to the Scene

🧪 Summary

• CSS makes your UI beautiful and modern

• Attach it using scene.getStylesheets()

• Use:

  • .class → reusable styles
  • #id → specific element
  • type → global styling