4

I have a stylesheet like this:

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

.title
{
    -fx-font-size: 20px;
}

I had thought that since * is more generic than .title, then the -fx-font-size defined in .title would have precedence over it, but I'm wrong. No matter what font size I changed it to in .title, that title label is still rendered at 15px. When I removed the * block, the title label would correctly reflect the size defined in .title.

Is there anything wrong with my approach? I'm just trying to set a "global" look and feel, while giving specific nodes the flexibility to adjust it when that node needs a more customized look.

Edit

It seems like this problem is only visible for font related CSS properties. I have tried changing -fx-font-size in my example to -fx-border-color, and it seems to work according to normal CSS standard.

It seems like there is something weird with the font properties.

Community
  • 1
  • 1
Jai
  • 8,165
  • 2
  • 21
  • 52

2 Answers2

3

You assign the font size for every node.

For Labels (and similar elements) though the text is not displayed by the Node itself, but by a descendant node. Normally that node would inherit the -fx-font-size property from the Label, but since you assign that property for every single node, it's assigned for this descendant itself and therefore the value from the parent is not used.

To fix this assign the new size for descendants of the node with class title:

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

.title * {
    -fx-font-size: 20px;
}
fabian
  • 80,457
  • 12
  • 86
  • 114
2

You can use !important:

.title{
    -fx-font-size: 20px !important;
}

or even better if you have only one element with ID:

#title{
   -fx-font-size: 20px !important;
}

From https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html on the paragraph:

Scene, Parent and SubScene Stylesheets

CSS styles can come from style sheets or inline styles. Style sheets are loaded from the URLs specified in the stylesheets variable of the Scene object. If the scene graph contains a Control, a default user agent style sheet is loaded. Inline styles are specified via the Node setStyle API. Inline styles are analogous to the style="..." attribute of an HTML element. Styles loaded from a Scene's style sheets take precedence over rules from the user agent style sheet. Inline styles take precedence over styles originating elsewhere. The precedence order of style rules can be modified using "!important" in a style declaration.

Priorities of Styles for a Node

The JavaFX runtime uses the following priority rules to set the visual properties of a node. The source with a higher priority that has a value for a property is used:

• Inline style (the highest priority)

•Parent style sheets

•Scene style sheets

•Values set in the code using JavaFX API

•User agent style sheets (the lowest priority)

The style sheet added to the parent of a node is given higher priority than the style sheets added to the scene. This enables developers to have custom styles for different branches of the scene graph.

GOXR3PLUS
  • 6,877
  • 9
  • 44
  • 93