JavaFx: CSS element unable to inherit properties of it’s ID

I have created an Options menu with JavaFx and styled it with CSS. I have used FXML for designing the options window. In the options window, I have created a label at the top and given it ID “title”. Following is my FXML code and CSS code:

*{
 -fx-font-size: 14px;
    font-size: 14px;
 }

 
#title{
    -fx-font-size: 20px;
    font-size: 20px;
    -fx-text-fill: #35568c;
}

FXML for Label:

<Label id="title" alignment="CENTER" contentDisplay="CENTER" layoutX="80.0" layoutY="14.0" prefHeight="31.0" prefWidth="200.0" styleClass="big" text="Options">
         <font>
            <Font name="Bell MT Bold" size="20.0" />
         </font>
      </Label>

The problem with my output is that the label should inherit properties from #title part of CSS but instead, it is inheriting font-size from the * part and text-fill from #title part.

Screenshot of output

EDIT:

I changed my CSS code for #title to

#title{
    -fx-font: 20 'Bell MT';
    font: 20 'Bell MT';
    -fx-text-fill: #35568c;
}

Now my code is working properly. I changed -fx-font-size to -fx-font. But I still don’t understand why font-size was not working.

Answer

There is no need to set non-JavaFX CSS attributes like font rather than -fx-font, those non-JavaFX CSS attributes will just be ignored (or potentially cause issues).

If you set the font in the FXML (not recommended), then I think that would override the value you set in CSS usually.

Generally, for styles like titles, it is probably best to use a style class rather than an id.

I don’t think using the * universal selector is a good idea. Maybe it is OK, maybe it is not. The standard JavaFX modena.css style sheet uses a syntax of .root for the defaults, perhaps that would be better for you.

A description of the root style class in the Scene JavaFX CSS:

The Scene object has no settable CSS properties, nor does it have any pseudo‑classes. However, the root node of the scene is assigned the style class “root” (in addition to style classes already assigned to the node). This is useful because the root node of Scene is the root container for all active scene‑graph nodes. Thus, it can serve as a container for properties that are inherited or looked up.

Also, you tagged your question javafx-8. JavaFX 8 is obsolete, and a more modern version of JavaFX is recommended.

Changing default colors

If you want to change the default colors for the application, then you can do that by overriding the looked-up colors defined in the .root section of the default modena.css stylesheet.

The main looked-up color which you might override is -fx-base which sets the default color style for the entire application.

Study the JavaFX CSS reference if you would like to learn more about looked-up colors.

For example, the following style sheet rule sets the default font size to 20 and the default color of the text in labels to dark green.

.root {
    -fx-font-size: 20;
    -fx-text-background-color: darkgreen;
}

Example App

The example defines a default size for text in the app within the .root section. The default style size is overridden in the .title section so that titles can be larger. The example application requires JavaFX 17+.

The example application doesn’t set default colors, but, if you want to do that, you can experiment by changing the supplied CSS to match the CSS in the default colors section of the answer.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class RootFontSizeApp extends Application {

    public static final String CSS = "data:text/css," + // language=CSS
            """
            .root {
                -fx-font-size: 20;
            }
            
            .title {
                -fx-font-size: 30;
            }
            """;

    @Override
    public void start(Stage stage) throws Exception {
        Label title = new Label("Greetings earthlings");
        title.getStyleClass().add("title");

        Scene scene = new Scene(
                new VBox(20,
                        title,
                        new Label("hello, world")
                )
        );
        scene.getStylesheets().setAll(CSS);

        stage.setScene(scene);
        stage.show();
    }

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