JavaFX CSS

What is CSS?

CSS (Cascading Style Sheets) is a design language which is used to enhance the appearance of the web pages without changing its functionality. It only deals with the way, a web page is presented on the web browser.

Using CSS, we can define the color, size, font styles, spacing between the paragraph, alignment and many more thing for a web page so that it can look more precise and better. We can also configure the background of the application, layout, design and variety of display for the different size devises.

CSS in JavaFX

JavaFX, being the new generation UI library, provides the facility to configure the theme of the application. JavaFX provides the package javafx.css which contains all the classes to apply the CSS to the JavaFX application.

Applying CSS to the JavaFX application is similar to applying CSS to the HTML page. In this part of the tutorial, we will discuss styling rules and the steps to invoke them in JavaFX.

Default Style Sheet

JavaFX uses caspian.css as the default CSS file. It is found in JavaFX Run time JAR file, jfxrt.jar. This style sheet defines the default style rules for the root node and UI controls. This file is located at the path /jre/lib under the JDK installation directory. The following command can be used to extract the style sheet from the JAR file.

Adding Style-sheets to scene

However, JavaFX provides us the facility to override the default style sheet and define our own styles for every node of the application. The Style-sheet we create, must have the extension .css and it must be located in the directory where the main class of the application resides.

In JavaFX,there is a specific syntax of applying CSS to the scene. The syntax is given as follows;

Defining Styles in StyleSheet

A style definition can be given by using the name of the style which is also known as selecter and series of the rules that set the properties for the styles. Styling rules are given within the braces. Consider the following example named as mystyle.css. It defines the style definition for the each button node used in its container application.

Example

Selectors

There are various types of styles used in JavaFX. However, each type considers its own conventions regarding selectors. Style class selectors naming conventions are,

1. If the style class selector consists of more than one word, use the hyphen between them.
2. Style class selector names are preceded by a dot(.)

Examples of the selectors are:

the style for a particular node can be defined by using the node's ID. This ID can be set using setId() method. Use the # symbol before the Node_ID to make a style name for that node. For example, the node having id my_label can have the following type of selector name.

Defining Rules in Style-sheets

The rules for a style definition assigns values to the properties. There are some conventions for the property names that are given as follows.

1. If the property name consists of more than one word then use hyphen (-) to seperate them.
2. Property name for the styles are preceded by -fx-.
3. Property name and the value are seperated by colon (:).
4. Rules are seperated by the semicolon (;).

the example of defining rules for the properties is as follows.

There is a special style class named as .root defined in javafx. It is applied to the root node of the scene object. Since all the nodes of the application are the children of the root node therefore the style rules applied to this class can be applied to the whole scene graph of the application.

Class Styles

The class styles can be created by adding its definition to our style sheet. For example;

to add the above mentioned style class to the appropriate node, use the method getStyleClass().add() sequence of methods.

Example:

ID Styles

JavaFX provides us the facility to create the style for the individual node. The style name can be given as the ID name preceded by the hash(#) symbol.

Example

Setting Inline styles

JavaFX facilitates us to define the CSS rules in the JavaFX application code itself. However, the rules defined in the JavaFX application code is given precedence over styles from the style sheet.

In the following example, we have defined the CSS rules in the code file itself which shows the way by which the color and the font of a label can be changed using CSS rules.

Example