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...