Css doesn't work for a custom fxml component

Question

I use the following CSS to change the font of some components which are placed on a custom JavaFX AnchorPane, defined as fx:root. But the font-size remains default.

* {
    -fx-font-family : Arial;
}
.label, .textField, .textfield,  .checkBox, .text{
    -fx-font-size: 18;
}

I got that I should change them using the ids of all inner components but it's not a good idea, because it results in redundant code.

Then I got that applying it on the main style class, it will work. But the sad story is that * can't be overriden. (I have defined * selector in a global css class for my whole application.

Answer 1

Try .root instead of *.

For the font size, some of your class names are wrong. Try

.label, .text-field, .check-box, .text {
    -fx-font-size: 18pt ;
}

Style classes are documents in the CSS Reference Guide

Note that Text nodes have empty style class, so you need to explicitly set the style class for your text nodes.