Introduction to CSS

The main concept of the CSS markup language is matching UI elements to property values. Different ways to identify a UI element are called selectors and most CSS statements look as follows:

selector-name {
   property-name1: value1;
   property-name2: value2;
   /* ... */
}

To better see how it works, let's review a small example.

FirstStyles demonstration

In this demonstration, we will apply a CSS file to a JavaFX application, changing the styles of several buttons and a root node of the scene:

/* chapter6/basics/style.css */
.root { 
    -fx-background-color: lightblue; 
    -fx-padding: 10px; 
}
.button { 
    -fx-background-color: white 
}

Note that all JavaFX CSS properties have the -fx prefix to be clearly distinguished from web CSS ones. JavaFX CSS and web CSS share syntax and property names and look very similar but JavaFX developers deliberately made styles and classes different in order to avoid any compatibility issues. 

JavaFX CSS is described in detail in the JavaFX...