Scribd
Upload
10 views8 pages

CSS Tutorial for JavaFX and FXML

This document provides an introduction to CSS and how it can be used to style JavaFX and FXML applications. It explains CSS selectors, declarations, and how to style GUI elements like buttons and labels. Examples are given of CSS code that would style elements in a sample FXML layout.

Uploaded by

dibekaya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views8 pages

CSS Tutorial for JavaFX and FXML

This document provides an introduction to CSS and how it can be used to style JavaFX and FXML applications. It explains CSS selectors, declarations, and how to style GUI elements like buttons and labels. Examples are given of CSS code that would style elements in a sample FXML layout.

Uploaded by

dibekaya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1 CSS Tutorial

G52GUI CSS Tutorial


Contents
Introduction .................................................................................... 1
Selectors ........................................................................................ 1
Declarations .................................................................................... 4
Styling your GUI ............................................................................... 5
Styling FXML vs. Styling HTML .............................................................. 8
Useful Links .................................................................................... 8

Introduction
Cascading Style Sheets, or CSS, is a styling language for describing and setting the layout
for markup languages. Most commonly, it is used to set the styling and format of HTML and
XHTML in websites, but it can be used with any type of XML document, including FXML.

.button { /* Set style for all buttons */


-fx-text-fill: #dddddd; /* Sets font colour (hex) */
-fx-background-color: #444349; /* Sets background colour */
-fx-padding: 5px; /* Inner spacing on all sides */
}

.button#ok { /* Set style for just OK button */


-fx-font-weight: bold; /* Set font to bold */
}

The above code is an example of the CSS layout style for setting the properties of an
object. This code will set the text colour, background colour and padding (inner spacing)
for all buttons. Additionally, for only the ‘ok’ button, the font is set to bold. As the name
implies, CSS properties are cascading, meaning that in the markup hierarchy, objects will
inherit the properties of their parent, unless it is otherwise stated.

This tutorial will introduce the basics of CSS, along with its use with JavaFX and
FXML/Scene Builder 2. Following this, a small example of styling the tutorial GUI is given.
It is important to remember that CSS cannot change the content or structure of your FXML
file, it can only affect the appearance – CSS is not a scripting language.

Selectors
There are two main types of identifiers when using CSS: classes and ids. The former is
used when you want to give a series of objects the same properties, such as giving all
buttons the same colouring style, or setting the font for a particular type of label. The ID
2 CSS Tutorial

is used to define the properties for a single object where you want to identify that specific
item in your FXML document.

The format for accessing classes in CSS is to precede its name with a full-stop “.”, e.g.
.button will be used to set the properties for all items with the class “button”. Similarly,
the properties of individual items can be changed using the “#” symbol, appending it to
the ID, e.g. #ok will allow you to change the properties of an object with id “ok”.

Note that there may be multiple objects of different classes with the same ID, such as a
label and a text-field both named “firstname”. You can distinguish between these by using
the class identifier, which forms a ‘parent’ of each object:

.label#firstname{
/* styling for label named firstname */
}
.text-field#firstname{
/* styling for text-field named firstname */
}

The above code shows the chaining of classes and ids to be more specific in your styling.
This is also the case with style cascading, where an element will inherit features of its
‘parents’ in the XML layout. The following snippet of code demonstrates an example FXML
layout. While this has been simplified greatly, it is similar in idea to the tutorial example:
a Pane containing a SplitPane, which contains a left and a right AnchorPane. These
contain labels and a text-field: the left contains two labels; the right contains one label
and one text-field.

<Pane>
<children>
<SplitPane>
<items>
<AnchorPane id=”left”>
<children>
<Label text=”First Label” id=”label-italics” \>
<Label text=”Second Label” id=”label-bold” \>
</children>
</AnchorPane>
<AnchorPane id=”right”>
<children>
<Label text=”Third Label” \>
<TextField \>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</Pane>
3 CSS Tutorial

The above example can be styled using the following example stylesheet. For now we
won’t actually show the styling code, but identify which objects will be affected by each
selector block.

.root {
/* Sets the default style for all items */
}

.anchor-pane {
/* Sets the default style for all items contained in an AnchorPane */
/* Overrides any previous properties of parent tags or root */
}

.anchor-pane#right {
/* Sets the style for the AnchorPane with id “right” (only) */
}

.anchor-pane .label {
/* Sets the style for any Labels that are children of an AnchorPane */
}

.label,
.text-field {
/* Sets the common properties of all Labels and TextField */
}

#left .label {
/* Sets the style for all child Labels of a tag with id “left” */
}

.label#label-italic {
/* Sets the style for a Label with id “label-italic” */
/* Note the lack of spacing between the class and id */
}

.anchor-pane #label-bold {
/* Sets the style for tag with the id “label-bold” in an AnchorPane */
/* The space means the id belongs to a child, not an AnchorPane */
}

.[Link]#label-bold {
/* An unambiguous equivalent of the above block: specifies the style
of a Label with id “label-bold” that is a child of an AnchorPane */
}

The above code outlines a few different ways of using CSS. There is versatility in the
cascading of styles, but often it can cause unintended effects if not checked properly. An
4 CSS Tutorial

example of this is the use of spacing between classes and ids. In the last three cases, you
can see the distinction between the .class#id and .class #id in that the first will look
for an object of that class with that id, where as the second will look for an object with
that id that is a child of the class.

It is also possible to set common properties of multiple classes without using the
cascading, but simply using the comma-separation of classes as the block selector: see
.label, .text-field which will set the style properties for all labels and all text-fields
regardless of their hierarchy.

Note that the Pane is the parent tag for all objects, so the properties set for it will
cascade down to all its children unless they are overridden. This is the same, then, for the
AnchorPane, and indeed the styling for the right AnchorPane (.anchor-pane#right).

The .root class is the parent for all objects, so any properties set in the .root selector
will be the global values unless overridden for specific classes.

Psuedo-classes are one additional type of selector. These are classes with an appended
state, which is used to distinguish the style between certain actions. Pseudo-classes are
appended to a selector with the colon operator ‘:’, e.g. .class:state. These allow you
to override certain style of a class based on certain actions, although the types of
interactions are quite limited. The most common state is “hover”, which will trigger when
the mouse is moved over it. Having a pseudo-class does not override the properties of the
main class, unless specified explicitly in the CSS file. Other general pseudo-states include
“pressed” and “focused”.

Declarations
Aside from selectors, declarations are needed to actually set the properties of your style.
These describe the various properties, from fonts and colours to borders and padding. In
JavaFX, all property declarations begin with “-fx-”. These are added to the selector
blocks and will set the properties of the elements that match up to this.

Declarations are made up of two parts: the property name and its value, separated by a
colon:

-fx-property-name: value; /* comment */

Each separate declaration must end with a semi-colon ‘;’. If the same declaration is
called multiple times in the same selector block, the last call is the one that is used.

Property values typically come in 3 types: the numeric value, e.g. for setting the size of
something; text value, e.g. font types or urls; and colours. Numeric value properties can
often have the units specified, such as when setting the size of a border you can specify
centimetres (cm), pixels (px), or points (pt). Note when setting font-size, this is normally
in pt, e.g. 11pt.

String values vary more on the property, for example, you can specify a border type as
‘solid’ or ‘dashed’, or the font-family, ‘Arial’ or ‘sans-serif’.
5 CSS Tutorial

Colour types are slightly different in that you can set the using a named colour (e.g. red),
using hexadecimal values (#F0AAAA), or even by specifying the red-green-blue values
(rgb(240, 170, 170)). A colour picker tool for getting the rgb or hex values is available
here, and a list of pre-named colours in JavaFX can be found here.

Some declarations allow a chain of properties that sets multiple properties in one line. For
example, the –fx-font property:

.root { /* base properties for all objects */


-fx-font: bold 12pt “Arial”
}

This is equivalent to the following:

.root { /* base properties for all objects */


-fx-font-family: “Arial”;
-fx-font-weight: bold;
-fx-font-size: 12pt;
}

Note that for font-family, the given value is a string of three fonts. This effectively means
that the font will be Arial, unless it is not found in the font library of the system it is
running on, in which case it will be Helvetica. If neither of those is present, it defaults to
the system’s base sans-serif font.

To set the font colour, the declaration parameter name is ‘text-fill’, e.g.

–fx-text-fill: blue;

Styling your GUI


Now you have an understanding of CSS, you can apply it to your PersonView from the
tutorials. It is important to note that the ‘id’s in CSS are NOT the same as ‘fx:id’. The
former is used by the styling, the latter by
the Controller. First, we will look at the
[Link] file in SceneBuilder. For
your labels on the right hand side of the right
AnchorPane, e.g. firstNameLabel, select
each of them. On the right hand side of
SceneBuilder, in the ‘Properties’ tab, set the
‘Style Class’ to “information”. Make sure you
click the ‘+’ button. For the “Details” Label,
add “details” as its ‘Id’ in the CSS properties
tab. Save in SceneBuilder, and refresh your
Project in Eclipse.
6 CSS Tutorial

.root { /* base properties for all objects */


-fx-font: 12pt "Arial"; /* set default font */
-fx-text-fill: #dddddd; /* set default text colour */
-fx-background: #444349; /* set background colour */
-fx-base: #444349; /* set base window colour */
-fx-focus-color: transparent; /* remove focus colour */
-fx-accent: #808080; /* selection colour */
}
.menu-bar, /* menu bar and menu items */
.context-menu {
-fx-background-color: #f2f2f280; /* set to be 50% transparent (rrggbbaa) */
}
.context-menu .label { /* set text colour for menu labels */
-fx-text-fill: #444349;
}
.table-view { /* make table view transparent */
-fx-base: transparent; /* base colour */
-fx-control-inner-background: transparent; /* background colour */
-fx-table-cell-border-color: transparent; /* border colour */
-fx-table-header-border-color: transparent; /* header border colour */
}
.table-view:row-selection, /* set selection properties */
.table-view:col-selection {
-fx-background-color: transparent; /* make transparent */
-fx-text-fill: #444349; /* change selection colour */
}
.table-view .column-header-background {
-fx-background-color: transparent; /* make header transparent */
}
.table-view .column-header, /* remove borders for table contents */
.table-view .filler {
-fx-border-color: transparent;
-fx-background-color: transparent;
}
.table-view .column-header .label { /* set properties of header label */
-fx-text-fill: #f2f2f2;
-fx-font-size: 18pt; /* increase font size (from 12pt) */
}
.[Link] { /* labels with class ‘information’ */
-fx-font-style: italic; /* make italics */
}
.label#details { /* label with id ‘details’ */
-fx-font-size: 14pt; /* increase font size (from 12pt) */
-fx-font-weight: bold; /* make font bold */
-fx-underline: true; /* underline text */
}
.button { /* properties for all buttons */
-fx-font-size: 10pt; /* decrease font size (from 12pt) */
-fx-text-fill: #444349; /* change text colour */
-fx-pref-height: 30px; /* set preferred height */
-fx-padding: 10px; /* set inner padding */
-fx-background-color: #f2f2f2; /* set background colour */
-fx-background-radius: 0; /* make button have sharp corners */
-fx-border-radius: 0; /* make border have sharp corners */
-fx-border-color: #dddddd; /* set border colour */
-fx-border-width: 1px; /* set border thickness */
}
7 CSS Tutorial

The above code is the CSS to style your GUI. To add this project, create a new File in your
‘view’ package (right-click ‘view’ > New > Other… > General > File). Name it
‘[Link]’, and copy the above code into it.

There a multiple ways to assign a stylesheet to a Scene. The first way, we will assign it
within Scene Builder. Open [Link] in Scene Builder, and select the
BorderPane. On the right hand side, again in ‘Properties’, click the ‘+’ under
‘Stylesheets’. Navigate to your ‘src/view’ folder and select ‘[Link]’. Save and
refresh your project. Running the project now should style both the RootLayout and the
embedded [Link] due to the nature of the FXML hierarchy.

However, if you click either the New… or Edit… buttons, the new window is NOT styled by
your CSS file. This is because it belongs to a separate Scene. The next step is an example
of how to assign a stylesheet programmatically to a window.

For the PersonEdit window, you can assign the stylesheet in Scene Builder, as with the
RootLayout, or add the following line of code to your showPersonEdit() method after
the new Scene is created:

Scene scene = new Scene(personEdit); // !! Existing code !!


[Link]().add(“view/[Link]”); // Add stylesheet
8 CSS Tutorial

Styling FXML vs. Styling HTML


This section is for those who are familiar with CSS for styling websites, to highlight the
differences between using CSS with JavaFX and HTML. There are some notable
distinctions.

 All declaration begin with –fx- when styling FXML files


 There are no selectors for specific tags, like div for <div> when styling HTML
o You should use the class equivalent, like .button for <Button>
 Most objects inherit the Node tag, which has a specific set of pseudo-classes
o Not all pseudo-classes are supported
o :active is replaced by :pressed
o :focus is replaced by :focused
 The FXML CSS parser will return an Exception when a declaration is not valid for that
object
o This can be useful to find where styling is not working as it should
 The color declaration for changing the font colour does not work consistently
o You should use -fx-text-fill instead
 Neither –fx-background or –fx-border can be used to chain commands, so the sub-
declarations should be called, e.g.
o –fx-background-color, -fx-background-image
o –fx-border-color, -fx-border-width
 The width and margin declarations are not valid
o You can set the preferred width using –fx-pref-width
 The FXML CSS parser does not support comma separated strings of font families

Useful Links
Oracle JavaFX 8 CSS Reference:
[Link]

Oracle Tutorial Styling a JavaFX UI with CSS:


[Link]

W3 Schools CSS Tutorial:


[Link]

W3 Colour Picker / RGB to Hex Converter


[Link]

Common questions

Powered by AI

In JavaFX CSS, declaration values can be numeric, text, or color-based. Numeric values often include units like pixels (px), points (pt), or centimeters (cm) for sizing elements. Text values pertain to properties like font family/type (e.g., 'Arial', 'sans-serif') or border styles ('solid', 'dashed'). Colors can be specified using names (e.g., 'red'), hexadecimal values ('#F0AAAA'), or RGB values ('rgb(240, 170, 170)'). These versatile value types allow detailed customization of GUI elements .

The layout structure of an FXML document directly influences the application of CSS styles in JavaFX due to the hierarchical nature of both FXML and CSS. The parent-child relationships in FXML mean that styles applied at a higher level (like within a Pane or root) will cascade to all child elements unless overridden. This requires careful organization of class and ID selectors in your CSS file to ensure correct styles are applied. The structure defines the scope and inheritance of styles, making it essential to align CSS structure with FXML layout carefully .

Pseudo-classes in JavaFX CSS are used to apply styles to components based on their dynamic state, similar to HTML CSS. They are appended to selectors to define styles for situations such as when a user hovers over a control (e.g., '.button:hover'). However, in JavaFX, some HTML pseudo-classes do not apply; for example, ':active' becomes ':pressed', and ':focus' becomes ':focused'. These pseudo-classes allow dynamic styling in response to user interaction, enhancing the GUI experience by incorporating more responsive design elements .

In JavaFX CSS, selectors for IDs use the '#' symbol as in traditional HTML CSS to target specific nodes. However, unlike HTML which allows tags as selectors (such as 'div'), JavaFX uses style classes with a dot prefix ('.') to apply styles to multiple nodes of the same type, like '.button' for any Button controls. JavaFX does not use tag names directly because FXML nodes do not have native CSS tag selectors – they rely on the Node inheritance system and custom class styling. This reliance on classes and IDs allows for more precise styling specific to the JavaFX environment, providing flexibility and control akin to HTML but through a different structure .

Cascading styles in CSS mean that style rules are applied from the top of the hierarchy downward. Styles from ancestor elements are inherited by descendant elements unless overridden by more specific rules. In a CSS-styled JavaFX application, you can apply styles to a parent element, such as a Pane, which will then cascade to all its children unless explicitly styled otherwise. For example, properties set for the '.root' class in a CSS file will become the default styles for all objects unless specific selectors override them .

While both JavaFX and HTML use CSS for styling, JavaFX CSS begins with '-fx-' for all declarations, offers no selectors for specific tags, and may not support every HTML pseudo-class. JavaFX styling relies on class names like '.button' instead of tag names like 'div', and pseudo-classes like ':hover' become ':pressed' or ':focused'. JavaFX also poses unique challenges, such as needing specific syntax for properties like text-fill and handling exceptions if declarations are invalid. HTML CSS generally allows broader flexibility with broader pseudo-class support and a richer set of selectors, making JavaFX CSS appear restrictive and more challenging for complex dynamic styles .

In a JavaFX application, specific components such as Labels and Buttons are styled using CSS by defining selectors that target these components. For example, to affect all buttons, one would use the class selector '.button', and to target a specific button with an ID, use '#button-id'. CSS declarations like '-fx-text-fill', '-fx-background-color', and '-fx-font-size' are used to specify properties such as text color, background color, and font size. Pseudo-classes can also be used to style components based on specific states, for instance, '.button:hover' changes properties when the button is hovered over .

The '.root' class in a JavaFX CSS file sets the base or default styles for all elements unless overridden by more specific selectors. Managing this class effectively is crucial because changes to it can cascade and affect every element within the application. Therefore, it's important to define global styles carefully and override them with more specific class or ID selectors for components where deviation from a base style is needed. This hierarchical style mechanism should be checked to prevent unintended styling changes and ensure consistency across the UI .

Styles across multiple Windows or Scenes in a JavaFX project can be managed using stylesheets loaded at runtime. Developers attach a common CSS file to different Scenes using Scene Builder or programmatically. For instance, after creating a Scene, one can add `scene.getStylesheets().add("view/MyTheme.css")` to incorporate a specific stylesheet. This ensures consistency in appearance across different windows while allowing separate Scenes to have additional unique styling if needed, thus maintaining a cohesive look while supporting diversity in design .

The primary function of CSS is to describe and set the layout for markup languages, most commonly HTML and XHTML. It sets the styling and format of these documents and can also be used with XML documents like FXML in JavaFX applications. In JavaFX, CSS is used to style GUI components, allowing developers to apply consistent themes across applications by affecting the appearance but not the content or structure of FXML files .

You might also like