JavaFx my css file is not working

Question

It was working earlier but now here is a screenshot

of my running program and it is clearly not. Can somebody help me with this? I am a beginner to JavaFX.

Analog_clock.java

package analog_clock;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 *
 * @author ishansrivastava
 */
public class Analog_clock extends Application {

    @Override
    public void start(Stage primaryStage) {

        Circle circle = new Circle();
        circle.setCenterX(100.0f);
        circle.setCenterY(100.0f);
        circle.setRadius(50.0f);

        Group g = new Group();
        g.getChildren().add(circle);

        Pane bg = new Pane();
        //bg.setBackground(new Background(new BackgroundFill("-fx-color: #ACACE6", null,null)));
        bg.getChildren().add(g);

        Scene scene = new Scene(bg, 300, 250);
        scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show()cl;
    }

    public static void main(String[] args) {
        launch(args);
    }

}

style.css

.Circle
{
    -fx-stroke: #757575; /* sonic silver */
    -fx-fill: #00CC99; /* caribbean green */
}
.pane 
{
    -fx-background-color: #ACACE6; /* maximum blue purple */
}

Thank you for helping me out.

update :

after changing my css file to this :

.circle
{
    -fx-stroke: #757575; /* sonic silver */
    -fx-fill: #00CC99; /* caribbean green */
}
.root
{
    -fx-background-color: #ACACE6; /* maximum blue purple */
}

my background appears to be purple where as I have nothing named root in my code.

Answer 1

You can do as you began, there are some points that you have missed, and probably you don't understand how styling works with css.

First of all when you add the syleSheet to your Scene, that means you say for the scene: look here is the stylesheet you can use these things from it. So you don't add it them instantly to the components like background, circle etc.

Furthermore, while the Circle is a Node, and it implements Styleable, you have the method getStyleClass() that holds all stylings for the Node(in this case for the Circle), and if you want to add some new styling you can simply do this way: (for example for the circle) circle.getStyleClass().add("cirle"); Of course this won't work wothout setting the stylesheet.

One more thing, you can specify the stylesheets for every node, os if you want you can use one stylesheet for the Pane and an other for the Circle.But usually us use stylesheets at parent nodes, then add styles for the children separately.

So this is how you can simply use the styling. I hope this is understandable.

Answer 2

scene.getStylesheets().add(Analog_clock.class.getResource("/style.css").toExternalForm());

Answer 3

If you set the id of the circle & bg, it should work:

circle.setId("circle");`
bg.setId("bg");

Then create your CSS file:

#circle{
    -fx-stroke: #757575; /* sonic silver */
    -fx-fill: #00CC99; /* caribbean green */
}

#bg{
    -fx-background-color: #ACACE6; /* maximum blue purple */
}

And regarding the root word, I'm not quite sure, but I think it has a special meaning in JavaFX (specifically FXML language), and that's why it has been understood as if you defined your Pane bg with that name! However, have a look at How to understand and use <fx:root> in JavaFX? it may help.