JavaFX CSS properties types

This article explains a few useful CSS proerties type for the JavaFX CSS configuration.

Fonts

The following CSS elements can be define for a font:

• "-fx-font-family": The font family
• "-fx-font-size": The font size
• "-fx-font-style": the font style, which can be "normal", "italic", or "oblique"
• "-fx-font-weight": The font weight, which can be "normal", "bold", or "bolder"

Note that fonts used in the CSS configuration are defined by their font family. Therefore if you want to use a font which is not installed on the platform in the CSS configuation file, you will have to define it in the Graphics configuration to perform the binding^[1]

See resolving fonts used in the Look and Feel

Example

      -fx-font-family: 'MyFontFamily';
      -fx-font-size: 14.4;

General properties

Sizes

The Pattern for sizes can be one of the following:

• <value> or <value>px for a value in pixels
• <value>mm for a value in millimeters
• <value>in for a value in inches

Example

      -fx-stroke-width: 12mm;

Dash patterns

The dash Patterns can define a series of visible and invisible segments. The Pattern is: <size> [<size>]+. Every element of the Pattern define the size of one visible and invisible segment. On the case of only one value, each segment will have the same size.

Example

      -fx-dash-array: 2mm 1mm;

Haloing

Haloing around a Shape can be defined with the -fx-effect property, with an associated dropShadow:

      -fx-effect : dropshadow(<type>, <color>, <radius>, <spread>, <offsetX>, <offsetY>)

The meaning of the arguments is:

• "type": law type. Can have one of the following values: gaussian, one-pass-box, three-pass-box,two-pass-box^[2]
  gaussian seems to have the best results
• "color": the color of the halo^[3]
  Normally you would want to use "black" for the color
• "radius": the blur radius of the halo (which is a float value between 0 and 127). This value controls the width of the haloing around the pixels on which the halo is applied
• "spread": the zone on which the halo is applied(which is a float value between 0 and 1)^[4]
  For the value 0, all the halo will be blurred (on all the radius). For the value 1, all the halo will be sharp (on all the radius)
• "offsetX": the offset on the X axis of the halo relative to the shape^[5]
  Choose 0 for a better result
• "offsetY": the offset on the Y axis of the halo relative to the shape^[5]
  Choose 0 for a better result

Example

      -fx-effect: dropshadow(gaussian, black, 0.3, 1.0, 0, 0);

Padding

The padding of a widget define the spacing between the widget (usually a text) and its bouding box. The format is: <size> <size> <size> <size>. The order of the elements is: top, right, bottom, left. If only one size is defined, all sizes will be identical.

The following diagram present a top left padding:

Example

      -fx-effect: -fx-padding: 2mm 2mm 1mm 1mm;