JavaFX CSS Tutorial
Cascading Style Sheets (CSS) is a style sheet language used to design applications to make it looks great. In this article, we will show you methods and examples for applying Cascading Style Sheets (CSS) into your JavaFX application. This JavaFX CSS tutorial is very simple to learn because we will use the simplest and easiest method to add CSS to your JavaFX application.
Easiest methods to add CSS to a JavaFX application
- Applying CSS using a CSS file
- Applying CSS to nodes
- Using the SceneBuilder
How to add CSS to JavaFX
To add CSS to your JavaFX application, we will use the simplest and easiest methods to add CSS in JavaFX application. In our first example, we will add a CSS file to your JavaFX application and change the styles of the scene’s buttons and root node. To identify a UI element are called selectors and most CSS statement looks as follows.
.selector-name {
property-name1: value1;
property-name2: value2;
}
Note that all JavaFX CSS properties must have the -fx prefix. The following example will be styling the root node of our JavaFX application.
Example: CSS Styling
This is how to add styles in a CSS file. The .root refers to the root element of the scene and .button refers to all instances of the Button class. If you will use the .button selector it means that the style will be applied to all buttons in your scene.
.root{
-fx-background-color: lightblue;
}
.button{
-fx-background-color: black;
-fx-text-fill: white;
}
Example: Adding CSS in JavaFX
Now, let’s use this CSS in the application. We will then use the root variable to add CSS to the application. Note that the "style.css" is the filename of the CSS file. You can put this code anywhere you want, such as the button action event or the main class.
root.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
Output
To trigger the style, I put the code at the button action event to fire the CSS in JavaFX.
Example: Clear the CSS in JavaFX
Clear the JavaFX CSS tutorial, If you want to remove the loaded CSS in your application, you can easily do this. See the example code below.
root.getStylesheets().clear();
Styling specific objects using ID selector
Addressing specific nodes of the JavaFX classes can be done with the # symbol. If you have two buttons in your JavaFX application and want to style one of them while leaving the other button alone. You can easily do this by looking the code example below.
// JavaFX Code
Button button1 = new Button("Learning with Kensoft PH");
button.setID("button1");
/* CSS */
#button1 {
-fx-background-color: black;
-fx-text-fill: white;
}
Applying CSS styles to JavaFX nodes
Loading a CSS file is not the only option to work with styles. In this JavaFX CSS Tutorial you can also load them directly to the JavaFX Code. Using the setStyle() method, the method can be called directly from the JavaFX Code to apply the CSS style to a specific nodes. Adding CSS to node looks like this. Node.setStyle(String style)
Example
In this demonstration, we will use a button to set the style of the background color, text color, width, height, and font size using the setStyle() method. See the code example below.
@FXML
private void Button_Style(ActionEvent event) {
btn_style.setStyle("-fx-background-color:"+text_bg.getText()+";"+
"-fx-text-fill:"+text_color.getText()+";"+
"-fx-min-height:"+text_height.getText()+";"+
"-fx-min-width:"+text_width.getText()+";"+
"-fx-font-size:"+text_font.getText()+";");
}
Output
Applying CSS Style using SceneBuilder
Using SceneBuilder is one of the simplest ways to apply CSS style in JavaFX. To set the style of a node in SceneBuilder, select any nodes you want to set the style and go to its properties, scroll down, and look for Style. I will provide a screenshot below to see how it looks. The first textfield is for the style property and the second one is for the value.
Applying CSS file using SceneBuilder
JavaFX CSS tutorial, applying CSS file using SceneBuilder. Create a CSS file like a method we discussed above and create CSS style on it. Once you already created and style it. Go to your SceneBuilder, select any node, and then go to its properties. Look for Stylesheets and add the CSS file.
If your Selector refers to all instances of the same class, you don’t need to choose anything from the Style Class. However, if your Selector has a specific style for a specific node, you need to select your specific style from the Style Class.
YouTube Video
