JavaFX : style defined in fxml file (via SceneBuilder) cannot be overridden by the CSS file, how do I do this?

Question

How do I force style from CSS to override style from FXML

So I have an fxml file to which I added style (via Scene Builder, it works). I have given the nodes a style class name, and am calling it properly within CSS - I know this because when I go into my fxml file and remove the style for a particular node, the style in my CSS file works.

However, it seems that whatever is in my fxml file always overrides the style of the CSS file. This is despite the fact that the fxml file is loaded first.

Thanks so very much.

package coverAppWithThumbsWithCSS;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage; 

/* I only show loading in the files, not the controller */
public class CoverViewer extends Application {
    
    @Override
    public void start(Stage stage) throws Exception{
        //fxml specifies that the controller is the class CoverViewerController, it is never explicitly called 
        // instantiated 
        Parent root = FXMLLoader.load(getClass().getResource("/coverAppWithThumbsWithCSS/CoverAppWithThumbsAndCSS.fxml"));  
        Scene scene = new Scene(root);
    
/* stylesheet is loaded in second, but fxml file clobbers css style */  scene.getStylesheets().add(getClass().getResource("coverApp.css").toExternalForm());  
        stage.setTitle("Cover Viewer");
        stage.setScene(scene);
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
    
}

/* minimal css style
.borderPane style only works if I remove style from borderPane in the fxml
Then it works without an issue */

.borderPane{
    -fx-background-color : black; 
}

#bookListView{
    -fx-background-color : black; 
}
.root {
    -fx-font-size: 20px;
    -fx-font-family: sans-serif;
    -fx-background-color: #ffffff;
}

<!-- FXML file -->
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>


<BorderPane id="borderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-color: lightskyblue; -fx-border-color: magenta; -fx-border-style: solid;" styleClass="borderPane" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="coverAppWithThumbsWithCSS.CoverViewerController">
   <left>
      <ListView fx:id="bookListView" id="bookListView" maxHeight="1.7976931348623157E308" prefWidth="200.0" style="-fx-background-color: cornflowerblue; -fx-border-color: mediumorchid; -fx-border-style: solid;" styleClass="listview" BorderPane.alignment="CENTER">
         <BorderPane.margin>
            <Insets right="8.0" />
         </BorderPane.margin>
      </ListView>
   </left>
   <center>
      <ImageView fx:id="coverImageView" id="coverImageView" fitHeight="480.0" fitWidth="370.0" pickOnBounds="true" preserveRatio="true" style="-fx-cursor: hand;" styleClass="imageVIew" BorderPane.alignment="CENTER" />
   </center>
   <padding>
      <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
   </padding>
</BorderPane>

Answer 1

You may add the '!important' directive to your CSS declaration:

.borderPane{
  -fx-background-color : black !important;
}

This works, just as in "good old HTML". But: As in HTML, the use of '!important' should be strongly discouraged and regarded as bad practice - as is inline CSS within HTML elements.

In general, I prefer to define styling entirely in a CSS stylesheet, never in FXML. I use '!important' only as a last resort.