How to apply a css style to vbox.

Question

I'd like to apply below style to vbox. But It's not changed.
When I use ID property, it's changed, But I want to use class property.
.v-box{
     -fx-spacing:10;
     -fx-alignment:center;
Edited by: shakddoo on 2012. 4. 20 오후 9:08
Edited by: shakddoo on 2012. 4. 20 오후 9:08

Answer 1

.v-box is not a standard css selector.
You could used VBox (capitalized exactly like that and without a leading .) and it will work because you can select based upon type name, for example:
VBox {
  -fx-spacing:10px;
  -fx-alignment:center;
}Alternately you can create your own .v-box class and assign it to your VBox and it will work, for example:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class CssSample extends Application {
  @Override public void start(Stage stage) {
    VBox box = new VBox();
    box.getChildren().addAll(
      new Label("On either side the river lie,"),
      new Label("Long fields of barley and of rye,"),
      new Label("And through the fields,"),
      new Label("A road runs by,"),
      new Label("To many-towered Camelot")
    box.getStyleClass().add("v-box");
    StackPane layout = new StackPane();
    layout.getChildren().addAll(box);
    Scene scene = new Scene(layout);
    scene.getStylesheets().addAll(getClass().getResource("styledvbox.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
  public static void main(String[] args) { launch(args); }
// styledvbox.css
.v-box {
  -fx-spacing: 50px;
  -fx-alignment: center;
.label {
  -fx-font-family: "Comic Sans MS";
  -fx-text-fill: salmon;
  -fx-effect: dropshadow(one-pass-box, mistyrose, 10, 0, 1, 1);
.root {
  -fx-padding: 200px;
  -fx-font-size: 48px;
  -fx-background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/83/JWW_TheLadyOfShallot_1888.jpg');
  -fx-background-size: contain;
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
  -fx-background-color: cornsilk; 
}