JavaFX Cookbook

Search this site

Styles for Visual Components


JavaFX provides extensive support for styling components with CSS.  You can create JavaFX control skins using both inline and externalized style declarations.  The JavaFX style dialect supports both standard and JavaFX-specific constructs.  The following samples show how styles may be applied.

Styling Text

Using the JavaFX CSS engine, you can specify the look and feel of your text component as shown in the example below.  Note that all of the properties are specified in the style property rather than individual class instance properties.

Text{
    content:"Employee Information"
    style:"font-family:\"Helvetica\";"
          "font-size:24pt;"
          "font-weight:bold;"
}

The snippet above would produce the text shown in the following figure:


Styling a Rectangle

Besides text, you can also style shapes using CSS declarations.  The following styles a Rectangle instance:

Rectangle{
    width:100 height:70 styleClass:"broad"
    style:"fill:yellow;"
          "strokeWidth:2;"
     "arcWidth:10;"
        "arcHeight:10;"
}

The previous snippet produces a rectangle as shown in the figure below:


Styling a Circle

Besides text, you can also style shapes using CSS declarations.  The following styles a Circle instance:

Circle{
    radius:50
    style:"fill:silver;"
        "strokeWidth:2;"
          "stroke:black"
}

The previous snippet produces a circle as shown in the figure below:


Externalizing Your CSS in a File

Instead of doing inline CSS declarations, JavaFX also supports applying CSS from a file.  Once you have created your CSS file, you can apply it to your application using the stylesheets property of the Scene object as shown below:

Stage {
title : "External CSS Example"
scene: Scene {
   width: 200
   height: 400
            content: [ ... ]
            stylesheets:["{__DIR__}main.css"]
}
}

Styles can then be referred to using the styleClass property on the node as follows:

Text{content:"Pay Attention!"  styleClass:"specialText"}
The materials on this website represent a small sample of content loosely based on the book JavaFX Application Development Cookbook.  The book offers far more content with over 80 recipes covering a range of topics from basics to advanced concepts.  

Buy the Book

You can get your copy of the book directly from the publisher. Click here to order!