# Javafx Fxml Controls CSS

> Compose JavaFX views with FXML, controller injection, and control wiring.

- Skill: `johannesrabauer/javafx-fxml-controls-css` (Agent Skill)
- Install (CLI): `npx skillmds@latest add johannesrabauer/javafx-fxml-controls-css`
- Raw SKILL.md: https://api.skillmd.com/api/skills/johannesrabauer/javafx-fxml-controls-css/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JohannesRabauer (https://skillmd.com/u/johannesrabauer)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/johannesrabauer/javafx-fxml-controls-css

---


# JavaFX FXML, Controls, and CSS

Use this skill when the project should separate view markup, controller logic, and styling.

## Example

```xml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns="http://javafx.com/javafx/21"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="com.example.app.ui.HomeController"
      spacing="12">
    <padding>
        <Insets top="24" right="24" bottom="24" left="24" />
    </padding>

    <Label fx:id="titleLabel" text="Welcome" styleClass="title" />
    <Button text="Refresh" onAction="#refresh" />
</VBox>
```

```java
package com.example.app.ui;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class HomeController {

    @FXML
    private Label titleLabel;

    @FXML
    private void refresh() {
        titleLabel.setText("Refreshed");
    }
}
```

```css
.title {
    -fx-font-size: 20px;
    -fx-font-weight: bold;
}
```

## Setup notes

- Keep controller classes focused on UI orchestration and delegate business logic elsewhere.
- Use stylesheet classes instead of inline style strings for maintainability.
- Resolve FXML resources via the classpath relative to the owning class or module.
- Use `javafx-theming-icons-styling` for broader theme-system, icon-pack, and CSS architecture work.

## Gotchas

- `fx:id` mismatches fail at load time, not compile time.
- Modular applications must `opens` FXML controller packages to `javafx.fxml`.
- CSS selectors target JavaFX style classes and pseudo-classes, not web CSS semantics one-to-one.