Text Object Refuses to Change Color Despite CSS Directive to Do So

Question

The Text object in the code just before the event handler is not changing color, despite the id being set before the text is set. The text however, will change color with the text set fill. One thing I am curious about is that in the CSS, the color will not change with the .text{} OR #Sign-In-Text{}. Am I just using the CSS improperly?

Java Code:

public class CSSTrial1 extends Application {

@Override
public void start(Stage stage) throws Exception {
    stage.setTitle("CSS Trial");
    stage.setResizable(false);
    final GridPane grid = new GridPane();
    ColumnConstraints constraints = new ColumnConstraints();
    grid.getColumnConstraints().add(constraints);
    grid.setAlignment(Pos.CENTER);
    grid.setHgap(10);
    grid.setVgap(10);
    grid.setPadding(new Insets(25));
    grid.add(new Label("Character Name:"), 0, 0);
    final TextField nameField = new TextField("");
    nameField.setPromptText("Randel James");
    grid.add(nameField, 1, 0);
    grid.add(new Label("Weapon:"), 0, 1);
    final ComboBox<String> weapons = new ComboBox<>();
    weapons.getItems().addAll("Katsuragi x2", "Assault Rifle",
            "Pistol", "RPG-7", "Barret 50. Cal");
    grid.add(weapons, 1, 1);
    HBox box = new HBox(10);
    box.setAlignment(Pos.BOTTOM_RIGHT);
    Button submit = new Button("Submit Character");
    final Text text = new Text();
    text.setId("Sign-In-Text");
    submit.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent t) {
            text.setText("Signed In As: " + nameField.getText()
                    + ", Weapon: " + weapons.getValue());
            //text.setWrappingWidth(100);
        }
    });
    //text.setFill(Color.ROYALBLUE);
    grid.add(text, 0, 6);
    box.getChildren().add(submit);
    grid.add(box, 1, 3);
    Scene scene = new Scene(grid, 300, 275);
    scene.getStylesheets().add(CSSTrial1.class.getResource("CSSTrial1Style.css")
            .toExternalForm());
    stage.setScene(scene);
    stage.show();
}

}

CSS:

.root{
-fx-background-color: #710ad1;
}
.label{
-fx-text-fill:#11d30b;
-fx-font: bold 13pt fantasy;
}
.text{
-fx-text-fill:#11d30b;
-fx-font: bold 13pt fantasy;
}
#custom-text{
-fx-font: 16px "Serif";
-fx-padding: 10;
-fx-background-color: #CCFF99;
}
#Sign-In-Text{
-fx-text-fill:#11d30b;
-fx-font: bold 10pt fantasy;
}

Answer 1

Try:

-fx-fill: #11d30b; 

instead of :

-fx-fill-text: #11d30b;

Example in the docs: http://docs.oracle.com/javafx/2/text/jfxpub-text.htm#CHDDAEBG

Also take a look at a similar issue here: JavaFX TableView: Cannot Override '-fx-text-fill'!