You can customize the look of the built-in UI controls in interesting and powerful ways by defining your own CSS (Cascading Style Sheets). Using CSS in JavaFX applications is much the same as using CSS in HTML, because CSS in each case is based on the same CSS specification. The visual state of a control is defined by the .css file and enabled in the application through the stylesheets instance variable of the Scene class. Just as every element in an HTML document has the id and class properties, every Node in a JavaFX application has the id and styleClass variables. Using these variables, you can identify certain nodes in your application and then style them from CSS files. As a first step, consider implementing a Button as follows.

Button {text: "Download"}

When this control is added to the scene of your application, it produces the following output.

Now create a CSS file to redefine the default appearance of the Button. Create a new file called controlStyle.css and add the following code to it. Save the .css in the same package as the main class of your application.

.button {
    -fx-text-fill: #e4f3fc;
    -fx-font: 20pt "Tahoma Bold";
    -fx-padding: 10;
    -fx-color: #2d4b8e
}

.button:hover{
    -fx-color: #395bae;
}

After that, you need to make the JavaFX application aware of the newly added custom stylesheet. To do so, initialize the stylesheets variable of the Scene class to point to your custom stylesheet, as shown in the following code fragment.

import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;

Stage {
    scene: Scene {
        stylesheets: "{__DIR__}controlStyle.css";
        width: 350
        height: 100
        content: Button {text: "Download"}
    }
}

Compile and run your application again. Note that the button visuals have changed.

Every JavaFX UI control has a default style class name associated with it. The style class name is the same as the Control name, but with dash-separated lowercase names. So, for example, the style class for Button is button, the style class for RadioButton is radio-button, and so forth.

A CSS file consists of a series of rules. Each rule has a selector and one or more declarations. There are two rules in your CSS file. The selector of the first rule is .button, which meaning that this rule applies to all nodes in the application with a styleClass of button. The selector for the second rule is .button:hover, which also applies to all nodes in the application with a styleClass of button, but only when their hover variable is true. Note that specifying "." in the selector is crucial.

Within these rules are the declarations, each of which consists of a property name and value. Look at the declarations in the first rule.

• -fx-text-fill: #e4f3fc - Applies the specified color to the text caption of the button.
• -fx-font: 20pt "Tahoma Bold" - Defines a font size, a font family, and a style to apply to the text of the Button.
• -fx-padding: 10 - Specifies the space between the border of the button and its text content.
• -fx-color: #2d4b8e - Defines the color of the button. Because JavaFX CSS supports color derivation, changing this value results in a Button which still has a nice gradient and multiple backgrounds and borders. This is a very powerful feature unique to JavaFX CSS.

The second rule is applied only when the button is in the hover state.

• -fx-color: #395bae - Defines the color of the button when the cursor is on it

Now extend your application by adding two more buttons to the scene.

import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.geometry.HPos;

Stage {
    scene: Scene {
        stylesheets: "{__DIR__}controlStyle.css";
        width: 350
        height: 100
        content: [
            HBox {
                spacing: 10
                content: [
                    Button {text: "Download"},
                    Button {text: "GO"},
                    Button {text: "Submit"}
                ]
            }
        ]
    }
}

This code produces the following controls.

The CSS rule defined with the button and button:hover selectors applies to all three buttons. This is very helpful when you need to define a visual theme for all the buttons in your application. However, in some cases, you might need to emphasize one control in a group of controls. One way to accomplish this is to assign a new styleClass to a specific Button in your application and then style the button with some new CSS rules. In the following code fragment, the controlStyle.css file is modified to create the button1, button1:hover, button2, and button2:pressed style classes.

.button {
    -fx-text-fill: #e4f3fc;
    -fx-font: 20pt "Tahoma Bold";
    -fx-padding: 10;
    -fx-color: #2d4b8e
}

.button:hover{
    -fx-color: #395bae;
}

.button1 {
    -fx-font: 20pt "Verdana";
    -fx-text-fill: #5086bb;
    -fx-padding: 10;
    -fx-background-color: linear (0%,0%) to (0%,100%) stops (0%, #cbd0d7) (100%, white);
    -fx-background-radius: 23;
    -fx-border-radius: 23;
    -fx-border-color: #767676;

}

.button1:hover {
    -fx-background-color: linear (0%,0%) to (0%,100%) stops (0%, white) (100%, #cbd0d7);
}

 .button2 {
    -fx-background-color: #a0b616;
    -fx-text-fill: white;
    -fx-font: 22pt "Courier New Bold";
    -fx-padding: 10;
    -fx-background-radius: 10;
    -fx-border-radius: 10;
    -fx-border-style: dotted;
    -fx-border-color: #67644e;
    -fx-border-width: 2;
}

.button2:pressed {
    -fx-scale-x: 0.8;
    -fx-scale-y: 0.8;
}

Update the Button in your JavaFX application to use these new style classes. Define the styleClass variable for the Download button as button1 and the styleClass variable for the Submit button as button2. Keep the GO button as it is.

Button {text: "Download" styleClass: "button1"}
Button {text: "GO"}
Button {text: "Submit" styleClass: "button2"}

When the modified application is compiled and run, it renders the same controls. However, the visual appearance of the two buttons has been changed to reflect the button1 and button2 CSS styles. The view of the GO button is still defined by the button style class.

JavaFX CSS supports some unique and powerful concepts not found in HTML CSS. One of these is color derivation, which enables specifying a single color and then deriving gradients and borders from that color. Another unique feature is the ability to specify properties on the root or a branch of the scene and then to apply those properties to nodes deeper in the tree.

For example, there is a set of properties applied to the entire scene. By specifying a new rule in the CSS file that applies to the scene style class, you can alter the look of all the controls within your application in a uniform manner.

Consider an application that uses UI controls of different types. Its source code is available in the UIControlCSS.fx file. When no styles are applied, it looks like the following.

Apply the following CSS styles by specifying {__DIR__}controlStyle1.css in the stylesheets variable of the Scene class.

/*controlStyle1.css */

.scene{
    -fx-font: 14pt "Tahoma Bold";
    -fx-color: #e79423;
    -fx-background: black 
}


.button1{
    -fx-text-fill: #006464;
    -fx-background-color: #e79423;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5
}

.button2{
    -fx-text-fill: #c10000;
    -fx-background-color: #e79423;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5
}


.slider{
    -fx-border-color:white;
    -fx-border-style: dashed;
    -fx-border-width: 2;
}

The scene class overrides some variables, which all the built-in UI controls look to in order to derive their colors and font. Three additional rules are added to define specific visuals for the buttons and for a slider.

Specify the button1 class for the Accept button, and the button2 class for the Decline button as follows.

Button {text: "Accept" 
    styleClass: "button1"
	action: function () {
		buttonAction = "Accepted";
	}
}
Button {text: "Decline" 
    styleClass: "button2"
	action: function () {
		buttonAction = "Declined";
	}
}

When this application is complied and run, the following window is shown.

Add one more CSS file to try another look for your application. Create the controlStyle2 class with an alternative visual appearance.

/* controlStyle2.css */
.scene{
    -fx-font: 16pt "Courier New Bold";
    -fx-color: rgb(161, 183, 22);
    -fx-background: rgb(193, 193, 132)    
}

.button{
    -fx-text-fill: rgb(109, 109, 54);
    -fx-border-radius: 15;
    }

.borders{
    -fx-border-color: rgb(103, 100, 78);
    -fx-border-style: dotted;
    -fx-border-width: 1.5;
    -fx-border-insets: -5;
}

When you replace {__DIR_}controlStyle1.css with {__DIR_}controlStyle2.css in the stylesheets variable and apply the borders style to the labels, the view of the application is changed as follows.

You can easily experiment with various styles by adding new classes and using more CSS properties. You can also change themes dynamically in your application by setting a particular condition.

Related Documents

• JavaFX CSS Reference Guide
• Blog: Applying Styles to Scenes
• How-To's: How do I use CSS to style my UI

Samples That Use CSS Styles

• Sudoku
• Style Editor