JavaFX CSS :

We can use cascading style sheets (CSS) to create a custom look for JavaFX
GUI application.

We can apply CSS to scene,nodes and UI controls etc.

Using CSS in JavaFX applications is similar to using CSS in HTML.

So that we can change look and feel of our JavaFX GUI application using CSS.

JavaFX CSS Theme:

JavaFX application support themes.

So we can change,create or apply predefined CSS theme to our applications.

So using CSS themes we can change the entire look of our application.

The following code shows how to switch between the Caspian and Modena
look and feel style sheets.
//Default CSS theme is modena
// Switch

to

CASPIAN

theme

Application.setUserAgentStylesheet(STYLESHEET_CASPIAN);
setUserAgentStylesheet() method is used to apply CSS.

// to set default css theme to null

Application.setUserAgentStylesheet(null);

JavaFX CSS :
Default JavaFX CSS :

caspian.css is the default css for JavaFX applications.

We can open and extract it using the following command.

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

How to apply CSS in JavaFX ?

Using Class Selector :

We can apply class to nodes or UI controls.As
Button button = new Button("my button");
button.getStyleClass().add("btn");
Here getStyleClass() method is used to add css class to the button.

And defining style sheet :

.btn{
-fx-text-fill: white;
-fx-padding: 10;
-fx-background-color: #DFD901;
-fx-border-radius: 5;

Using ID Selector :
Apply or Assign Id as
Button button = new Button("my button");
button.setId("btn1");
Here setId() method is used to set id of node or UI control.

And defining style sheet :

#btn1{
-fx-text-fill: white;
-fx-padding: 10;
-fx-background-color: #DFD901;
-fx-border-radius: 5;

Using Inline Style :

We can apply directly css to any node as
Button button = new Button("my button");
button.setStyle("-fx-background-color: #DFD901; -fx-text-fill: white;
");
Here setStyle() method is used to set the inline style sheet.
Adding css :

Scene scene = new Scene(new Group(), 300, 200);

scene.getStylesheets().add("somepath/stylesheet.css");

JavaFX CSS Example :

package javafxtuts;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/**
*
* @author JavaFXtuts.com
*/
public class Javafxtuts extends Application {

@Override
public void start(Stage primaryStage) {
HBox root = new HBox();
//Set space or padding using setPadding() method

root.setPadding(new Insets(20));

//assiging a class to the button

Button button=new Button("my button");
//Adding a class to the button
button.getStyleClass().add("btn");

//assiging a class to the button1

Button button1 =new Button("Button1");
//set id to the button.
button1.setId("btn1");

root.getChildren().addAll(button,button1);
Scene scene = new Scene(root, 300, 150);
//To add a external css file we do as
String

style= getClass().getResource("New.css").toExternalForm(

);
//now add the external css file to the scene
scene.getStylesheets().add(style);

primaryStage.setTitle("javafxtuts.com");
primaryStage.setScene(scene);
primaryStage.show();
}

/**
* @param args the command line arguments
*/

public static void main(String[] args) {

launch(args);
}

JavaFX css:
.btn{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#34c669;
-fx-font-size: 30px;
-fx-background-radius: 20px;

}
#btn1{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#2fc6b3;
-fx-font-size: 30px;
-fx-hgap:2px;
}

JavaFX Button CSS :

You can apply CSS to the JavaFX button.

First of all, You should read JavaFX CSS and JavaFX Buttons Tutorials.

Now make a simple Button

Button button =new Button("My Button");

Now apply ID to the button as

button.setId("btn");

now defining the style sheet

#btn{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#34c669;
-fx-font-size: 30px;
-fx-background-radius: 20px;
}

And fanally add css file to the scene as

String

style= getClass().getResource("New.css").toExternalForm();

scene.getStylesheets().add(style);

JavaFX CSS Button Example :

package javafxtuts;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;

import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/**
*
* @author JavaFXtuts.com
*/
public class Javafxtuts extends Application {

@Override
public void start(Stage primaryStage) {
HBox root = new HBox();
//Set space or padding using setPadding() method
root.setPadding(new Insets(20));

//assiging a class to the button

Button button=new Button("my button");
//Adding a class to the button
button.getStyleClass().add("btn");

//assiging a class to the button1

Button button1 =new Button("Button1");
//set id to the button.
button1.setId("btn1");

root.getChildren().addAll(button,button1);
Scene scene = new Scene(root, 300, 250);

//To add a external css file we do as

String

style= getClass().getResource("New.css").toExternalForm();

//now add the external css file to the scene

scene.getStylesheets().add(style);

primaryStage.setTitle("javafxtuts.com");
primaryStage.setScene(scene);
primaryStage.show();
}

/**
* @param args the command line arguments
*/

public static void main(String[] args) {

launch(args);
}

CSS file for button:

.btn{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#34c669;
-fx-font-size: 30px;
-fx-background-radius: 20px;
}

#btn1 {
-fx-padding: 14 18 18 18;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 8;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
#9d4024,
#d86e3a,
radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 20px;
}

Source :
http://javafxtuts.com/javafx-button-css
http://javafxtuts.com/javafx-css
http://javafxtuts.com