How to add a CSS stylesheet in FXML


I'd like to link a css file to my application. In my fxml file I use this:

    <URL value="@../stylesheet1.css" />

...and I can see a styled preview when I open the fxml file in scenebuilder. But when I try to run the application I get an error: no protocol: ../stylesheet1.css

So I tested it this way:

    <String fx:value="stylesheet1.css" />

and now it's other way round - the application starts and applies the css, but I don't see the preview in scenebuilder. The error message:

"The file stylesheet1.css doesn't exist. Resource stylesheet1.css not found."

So how do I attach the css file properly?

Well, although my question wasn't answered why exactly it doesn't work the above way, I found a solution that works for me. In my FXML I have just the line

<?scenebuilder-stylesheet ../stylesheet1.css?>

so Scenebuilder works with that css. And in my main class I set the stylesheet programmatically:

Scene scene = new Scene(root);
String css = this.getClass().getResource("../stylesheet1.css").toExternalForm(); 
6/1/2014 7:51:15 AM

What I found usable and working solution to include css file in fxml is add stylesheets="@app/cssfilename.css" to the parent node of the fxml file just as for stack pane

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="" xmlns:fx="" fx:controller="app.fxml.SettingsController" stylesheets="@app/cssfilepath.css">

9/2/2018 2:29:29 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow