JavaFX and CSS Syntax

Question

I am trying out JavaFX to see how it is like, but I am having a lot of trouble with the css aspect of it. I know css, but I can;t figure out how JavaFX uses it. For example, if I wanted to style buttons on my page, some online resources say .button{} some say .Button{} and etc. I can't get a consistent basic guide on how todo it. I tried looking at the guide here

http://docs.oracle.com/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene/doc-files/cssref.html

The point being is, there is no guide that explains it clearly that I can find, so could anyone help?

Answer 1

some online resources say .button{} some say .Button{}

CSS is NOT case sensitive. So I don't think .button{} or .Button{} should matter.

When you write:

.button{
-fx-text-fill: rgb(49, 89, 23);
-fx-border-color: rgb(49, 89, 23);
-fx-border-radius: 5;
-fx-padding: 3 6 6 6;
}

you're overriding a style.

The code below will be a custom style:

.custom-button {
-fx-font: 16px "Serif";
-fx-padding: 10;
-fx-background-color: #CCFF99;
}

This tutorial might be helpful. They've created a good CSS, gives look of Metro app. I suggest you use theirs and make changes to it according to your use, instead of creating from scratch.

Here is the Java 8 version of the JavaFX CSS Reference Guide.