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?

You're looking to an old deprecated version of JavaFX (1.x). Look for JavaFX 8 here — José Pereda
– José Pereda, Commented Jul 10, 2015 at 22:40

Brendan · Accepted Answer · 2017-09-15 18:10:02Z

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.

edited Sep 15, 2017 at 18:10

Brendan

3,6593 gold badges22 silver badges11 bronze badges

answered Jul 13, 2015 at 5:12

Dushyant Bangal

6,40310 gold badges53 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tanner Summers Over a year ago

So, for the .custom-button, you need to apply that style to each button correct? I remember seeing a method to apply a class to a element in java, does this apply for that? also, thank you for the help, you know I keep seeing all this stuff online and no one explains it. Like for example, my css sheet works due to the background color of my scene changing, but I tried .button and tried .Button but it never seems to work. but my other styles do. It is also weird due to fact if i apply the style directly to the button (using a java method, it works but not in css sheet). weird stuff happening.

Dushyant Bangal Over a year ago

Yes, you can apply this Class and Style to an element using that method. If you dont notice a change in Button, try applying the custom style to the parent of that button. Because I remember I had to enclose 4 buttons in different parents, only to give them different icons.

Dushyant Bangal Over a year ago

I think Button's parent should be applied the css file, because applying css file to button didnt work for me. Then apply style class to button in FXML: <Button styleClass="CrossButton" /> design.css: .CheckButton .button { -fx-background-color: null; -fx-background-image: url("Check.png"); }

Tanner Summers Over a year ago

so should I make some kinda container for the buttons to be nested in then apply the css sheet to that? @Dushyant Bangal

Dushyant Bangal Over a year ago

Yes, but if you want all the buttons to be same, no need to create a custom class. Just put it all in .button{} directly and the apply the CSS to your root container.

|

Collectives™ on Stack Overflow

JavaFX and CSS Syntax

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related