JavaFX ID Selector

JavaFX ID Selector

In JavaFX, a CSS ID selector is used to change the appearance of a web application by changing the color, size, shape, font style, etc. The setId() method is used to specify the ID name, and the # symbol is used in the CSS file to specify the CSS properties. A distinct string assigned to a scene node serves as the CSS ID selector. The ID styles allow you to give individual CSS styles to scene graph nodes.

Syntax 

#node {
//CSS properties for node
}

Using CSS style on a button using the ID selector 

#button1 {
    -fx-background-color:White;   
    -fx-text-fill:black;   
    -fx-font-size:13;  
    -fx-border-color: Black;  
    -fx-border-radius: 9;  
}

 Example

Customer Information form

 Style.css

#label1  
{  
    -fx-background-color:Green;   
    -fx-text-fill:white;   
    -fx-font-size:16;  
    -fx-border-color: Black;  
    -fx-border-radius: 7;  
}  
#label2  
{  
    -fx-background-color:Orange;   
    -fx-font-family:courier_new;   
    -fx-text-fill:White;  
    -fx-border-color: Wheat;  
    -fx-border-radius: 5;  
    -fx-font-size:16;  
}

Ninjas.java

import javafx.application.Application;    
import javafx.scene.Scene;    
import javafx.scene.control.Button;    
import javafx.scene.control.Label;    
import javafx.scene.control.TextField;    
import javafx.scene.layout.GridPane;    
import javafx.stage.Stage;    

public class Ninjas extends Application {   
@Override  
public void start(Stage primaryStage) throws Exception {    
Label prog=new Label(“Customer Name");    
Label editor=new Label("Product Name”);    
TextField tf1=new TextField();    
TextField tf2=new TextField();    
prog.setId("label1");
editor.setId("label2");

Button Submit=new Button ("Submit");     
GridPane root=new GridPane();    
root.setHgap(10);  
root.setVgap(15);  
Scene scene = new Scene(root,400,200);    
root.addRow(0, Cust,tf1);    
root.addRow(1, prod,tf2);    
root.addRow(2, Submit);    
root.getStylesheets().add("style.css");  
primaryStage.setScene(scene);    
primaryStage.setTitle("Coding Ninjas”);
primaryStage.show();    
}    

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

Output

Student Information form

Style.css

#label1  
{  
    -fx-background-color:Green;   
    -fx-text-fill:white;   
    -fx-font-size:16;  
    -fx-border-color: Black;  
    -fx-border-radius: 7;  
}  
#label2  
{  
    -fx-background-color:Green;   
    -fx-font-family:courier_new;   
    -fx-text-fill:White;  
    -fx-border-color: Wheat;  
    -fx-border-radius: 5;  
    -fx-font-size:16;  
}
#btn  
{  
    -fx-background-color:Orange;   
    -fx-font-family:courier_new;   
    -fx-text-fill:White;  
    -fx-border-color: Wheat;  
    -fx-border-radius: 5;  
    -fx-font-size:16;  
}

Ninjas.java

import javafx.application.Application;    
import javafx.scene.Scene;    
import javafx.scene.control.Button;    
import javafx.scene.control.Label;    
import javafx.scene.control.TextField;    
import javafx.scene.layout.GridPane;    
import javafx.stage.Stage;
    
public class Ninjas extends application {   
  
@Override  
public void start(Stage primaryStage) throws Exception {    

Label country=new Label("Student Name");    
Label lang=new Label("Board");    
TextField tf1=new TextField();    
TextField tf2=new TextField();    
country.setId("label1");
lang.setId("label2");

Button Submit=new Button ("Submit");    
Submit.setId("btn");
GridPane root=new GridPane();    
root.setHgap(10);  
root.setVgap(15);  
Scene scene = new Scene(root,400,200);    
root.addRow(0, Student,tf1);    
root.addRow(1, board,tf2);    
root.addRow(2, Submit);    
root.getStylesheets().add("style.css");  
primaryStage.setScene(scene);    
primaryStage.setTitle("Coding Ninjas");
primaryStage.show();    
}    

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

Output

Frequently Asked Question 

What is JavaFX?

A collection of graphics and media packages called JavaFX gives programmers the tools they need to create sophisticated client apps that work consistently on various platforms.

What is the package?

A Java package is a collection of sub-packages, interfaces, and classes of a common type.

What is a CSS tag selector?

It is a set of phrases and elements that instruct the browser which HTML elements to pick so that the CSS property values in the rule are applied to them.

What is a label in HTML?

The caption for a form control element in an HTML form is defined using the <label> tag. Each label corresponds to a certain form element.

Conclusion

Finally, you've concluded this article. 

Congratulations!! You learned about JavaFX ID Selector in this blog. You studied the different CSS effects we can apply to the web application. After reading this, are you eager to read more articles on JavaFX? Don't worry; Coding Ninjas will take care of everything. 

Check out this problem - Smallest Distinct Window .

Check out the awesome content on the Coding Ninjas Website:

JavaFX Inline Styles

JavaFX Menu

Please see our Code studio guided routes to learn more about Java, Competitive Programming, JavaScript, System Design, and other topics. Also, enroll in our courses and use the accessible sample tests and problems. For placement preparations, have a look at the interview experiences and interview bundle.

Do upvote our blog to help other ninjas grow. Happy Coding!