A Brief Introduction to Styling Controls in JavaFX 1.3

Support for styling the core controls using CSS has been greatly enhanced for JavaFX 1.3. In fact, the default skin for the core controls, called Caspian, is now written as a style sheet rather than in JavaFX Script code. Below is an example of a small JavaFX 1.3 style sheet that I wrote for Jim Weaver's 3D Calendar application:

.scene {
   /* default font for all content, inherited by all nodes */
   -fx-font: 16pt "Amble Cn";

   /* main color palette */
   -fx-base: #AEBBD2;
   -fx-accent: #385589;
   -fx-mark-color: #3E857C;
}

.text-box {
   -fx-effect: innershadow( two-pass-box, rgba(0,0,0,0.2), 10, 0.0, 0, 2 );
   -fx-text-fill: #385589
}

#title.text-box {
   -fx-font-size: 125%;
}

.button:strong {
   -fx-text-fill: #D3DAE9;
}

If you have used JavaFX's CSS support in previous versions, you will notice some changes in how style sheets are now written.

• Where you used to write Scene, TextBox, and Button, you should now write .scene, .text-box, and .button. These are CSS class selectors, which kind of makes sense since you are selecting JavaFX control classes.
• All JavaFX style attributes now start with the -fx extension in order to avoid conflicts with standard CSS attributes. For example, you should now write -fx-font rather than just font.
• This style sheet also contains an example of one of the new features in JavaFX 1.3's style sheet support: the ability to an inner shadow effect. You can also specify a drop shadow using a similar syntax

Here is a table of some more new and fun attributes that can be set from style sheets.

Attribute	Example Value(s)	Works On	Notes
-fx-cursor	crosshair | default | hand | move | text | wait	Nodes
-fx-opacity	0 .. 1.0	Nodes
-fx-rotate	0 .. 360	Nodes	Defaults to 0. Not taken into account in layoutBounds
-fx-scale-x	Number	Nodes	Defaults to 1. Not taken into account in layoutBounds
-fx-scale-y	Number	Nodes	Defaults to 1. Not taken into account in layoutBounds
-fx-scale-z	Number	Nodes	Defaults to 1. Not taken into account in layoutBounds
-fx-translate-x	Number	Nodes	Defaults to 0. Not taken into account in layoutBounds
-fx-translate-y	Number	Nodes	Defaults to 0. Not taken into account in layoutBounds
-fx-translate-z	Number	Nodes	Defaults to 0. Not taken into account in layoutBounds
-fx-focus-color	white | #FFEEDD | #FFF	Controls	Color of the focus outline
-fx-control-inner-background	white | #FFEEDD | #FFF	TextBox, PasswordBox, ListView
-fx-mark-color	blue | #0000FF | #00F	CheckBox, RadioButton, ScrollBar
-fx-echo-char	"\u263A";	PasswordBox	Make your password boxes friendly!

This is just a sample of some of the power of the new CSS support. I haven't even touched on linear and radial gradients, deriving colors using derive( pink, -20% ), the ladder function, or alternative ways of specifying colors: rgb(), rgba(), hsb(), and hsba(). So much left to cover!