How-To's > How do I use CSS to style my UI?

Version: JavaFX 1.3

You can customize the look of your GUI elements by defining your own CSS (Cascading Style Sheets). JavaFX CSS are based on the same CSS specification that HTML uses. The visual state of an element 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.

See the topic below that best fits the answer to your question:

Applying CSS to Built-In UI Controls

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.

Let's consider a simple button. When this control is added to the scene of your application, it produces the following output.

You can easily make it fancy by adding a CSS file to your application. All you need is to develop a design you wish, create a .css file, and apply new styles to 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: white;
    -fx-font: 22pt "Tahoma Bold";
    -fx-padding: 10;
    -fx-background-radius: 10;
    -fx-border-radius: 10;
    -fx-background-color: linear (0%,0%) to (0%,100%) 
        stops (0%, #f1c572) (100%, #e27817);
    -fx-border-color: #e27817;
    -fx-border-width: 2;
}

.button:hover{
    -fx-background-color: linear (0%,0%) to (0%,100%) 
        stops (0%, #e27817) (100%, #f1c572);
}

 

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

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

Stage {
    scene: Scene {
        stylesheets: "{__DIR__}controlStyle.css";
        content: Button {text: "GO"}
    }
}

 

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

In some cases, you might need to have different CSS styles for buttons in your application. To accomplish this, create additional button styles in you CSS file, for example, button1 and button2, and apply them to Button objects in your .fx code by using the styleClass instance variable. See Using JavaFX UI Controls for more information about applying CSS styles.

Applying CSS to Other Elements of UI

You can also customize the look of other elements of your user interface, for example, shapes. Consider the following JavaFX code.

Stage {
    scene: Scene {
        content: [
            HBox {
                spacing: 10
                content: [
                    Rectangle{width: 80 height: 80},
                    Circle {radius: 40}
                ]					
            }
        ]
    }
}

 

When compiled and run, this code produces the following output.

Imagine that you need to apply the same type of fill, the same stroke, and the same opacity to both the rectangle and the circle. One way to implement this is to declare all the values within the Rectangle and Circle object literals. However, you will have to repeat the same declarations twice. This approach might be counterproductive, when you need to style, for example, 10 different shapes. You can apply a unified style to all the shapes at once by using a CSS style. Create a new file called shapeStyle.css and add the following code to it. Save the .css in the same package as the main class of your application. 

.myShapes {
    -fx-fill: linear (0%,0%) to (0%,100%) stops (0%, #cbd0d7) (100%, #2d4b8e);
    -fx-stroke: #2d4b8e;
    -fx-stroke-width: 5;
    -fx-opacity: 0.8;
}

 

Now, initialize the stylesheets variable of the Scene class to point to your custom style sheet, as shown in the following code fragment. Use the styleClass variable of Rectangle and Circle to apply the myShapes CSS class to both shapes.

Stage {
    scene: Scene {
        stylesheets: "{__DIR__}shapeStyle.css";	
        content: [
            HBox {
                spacing: 10
                content: [
                    Rectangle{width: 80 height: 80 styleClass: "myShapes"},
                    Circle {radius: 40 styleClass: "myShapes"}
                ]					
            }
        ]
    }
}

 

Compile and run your application again to see how much the look of the shapes has changed.

Examples

  • Style Editor
    This sample demonstrates how to use CSS to reskin controls to create a new look for different sizes of view screens, branding, or just plain fun.
  • Sudoku with CSS
    All of the UI components in this sample, including the buttons, are formatted with CSS. One button enables the user to toggle between two different color themes. In this sample, the buttons are created by extending the customNode class, not by using the built-in UI controls.

API Documentation

Last Updated: May 2010
[Return to How-To's Home]