Logo
×

JavaFX Inline Styles

In the JavaFX application, in order to apply various Inline css effect we will use the various css classes available in the JavaFX. It is used to apply the various css effect on the given object to make interface more understandable to the user. In order to design the webpages we use the Inline style CSS to give different color, backgrounds, text size, font style, spacings, paragraph, and alignments for a specified object. In JavaFX if we want to define rules of CSS inside the JavaFX application, we use the inline styles. The precedence is generally given to rules written in JavaFX application code than the rules written in separate CSS file. We can apply the CSS rule in JavaFX code on particular node as follows:

Syntax:

Label label_name= new Label(“label_id”);
label_name.setStyle(/*CSS Properties*/);  

Example:

Label l1= new Label(“Percentage”);
l1.setStyle("-fx-background-color:Black; -fx-text-fill:white; -fx-font-size:16");  

JavaFX CSS – Employee information form using Inline CSS:

Example:

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 CSSUI extends Application {   
  
@Override  
public void start(Stage primaryStage) throws Exception {    

Label fname=new Label("First Name");    
Label lame=new Label("Last Name");    
Label country=new Label("Country Name");    
Label lang=new Label("Language Name");    
TextField tf1=new TextField();    
TextField tf2=new TextField();    
TextField tf3=new TextField();    
TextField tf4=new TextField();    
country.setStyle("-fx-background-color:Blue; -fx-text-fill:white; -fx-font-size:16");  
lang.setStyle("-fx-background-color:Blue; -fx-text-fill:white; -fx-font-size:16");  
fname.setStyle("-fx-background-color:Blue; -fx-text-fill:white; -fx-font-size:16");  
lame.setStyle("-fx-background-color:Blue; -fx-text-fill:white; -fx-font-size:16");  


Button Submit=new Button ("Submit");    
Submit.setStyle("-fx-background-color:Red; -fx-text-fill:white; -fx-font-size:26");  


GridPane root=new GridPane();    
root.setHgap(10);  
root.setVgap(15);  
Scene scene = new Scene(root,600,400); 
root.addRow(0, fname,tf1);   
root.addRow(1, lame,tf2);    
root.addRow(2, country,tf3);    
root.addRow(3, lang,tf4);    
root.addRow(4, Submit);    
primaryStage.setScene(scene);    
primaryStage.setTitle("Employee Information");
primaryStage.show();    
}    
public static void main(String[] args) {    
launch(args);    
}    
  
}

Output:

JavaFX CSS – Inline Styles

Explanation:

In order to create the inline CSS effect on given components in JavaFX, we have to import all the required libraries. Then we have created one class named CSSUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold various components with inline CSS effect, a Group object is created which is then passed to the Scene class object.

The label is created using the constructor and various properties are set using setters. Also, button is created using the constructor and various properties are set. The CSS effect on the label is applied by using the setStyle() method in java file.

The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with title “ Employee Information ”. Also, it displays the label for First name, Last name, Country name, and Language name with submit button.

JavaFX CSS – Student marks information form using Inline CSS:

Example:

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 CSSUI extends Application {   
  
@Override  
public void start(Stage primaryStage) throws Exception {    

Label English=new Label("English");    
Label Maths=new Label("Maths");    
Label Science=new Label("Science");    
Label Hindi=new Label("Hindi");    
TextField tf1=new TextField();    
TextField tf2=new TextField();    
TextField tf3=new TextField();    
TextField tf4=new TextField();    
English.setStyle("-fx-background-color:Brown; -fx-text-fill:white; -fx-font-size:16");  
Maths.setStyle("-fx-background-color:Brown; -fx-text-fill:white; -fx-font-size:16");  
Science.setStyle("-fx-background-color:Brown; -fx-text-fill:white; -fx-font-size:16");  
Hindi.setStyle("-fx-background-color:Brown; -fx-text-fill:white; -fx-font-size:16");  


Button Submit=new Button ("Submit");    
Submit.setStyle("-fx-background-color:Green; -fx-text-fill:white; -fx-font-size:26");  


GridPane root=new GridPane();    
root.setHgap(10);  
root.setVgap(15);  
Scene scene = new Scene(root,600,400); 
root.addRow(0, English,tf1);   
root.addRow(1, Maths,tf2);    
root.addRow(2, Science,tf3);    
root.addRow(3, Hindi,tf4);    
root.addRow(4, Submit);    
primaryStage.setScene(scene);    
primaryStage.setTitle("Student Marks Information");
primaryStage.show();    
}    
public static void main(String[] args) {    
launch(args);    
}    
  
}

Output:

JavaFX CSS – Inline Styles

Explanation:

In order to create the inline CSS effect on labels and buttons in JavaFX, we have to import all the required libraries. Then we have created one class named CSSUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold labels and buttons with inline CSS effect, a Group object is created which is then passed to the Scene class object.

The label is created using the constructor and the name is set using the parameter. Also, button is created using the constructor and the name is set using the parameter. The CSS effect on the label and button is applied by using the setStyle() method on the labels and button in java file.

The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with title “ Student Marks Information ”. Also, it displays the label for English, Math, Science, and Hindi with submit button.

Related Topics

JavaFX StackPane

In the JavaFX application, in order to set Stack Pane as a layout, the StackPane class is used. The StackPane layout allows us to arrange the components in the stack...

4 minutes read.

JavaFX Box

In the JavaFX application, in order to draw a Box, the Box class is used. The Box allows us to form 3D shape having rectangular faces. All methods needed for...

4 minutes read.

JavaFX Label

The UI Control Label in a JavaFX is used to display the simple text. To use Label in JavaFX application javafx.scene.control.The label class is used. We can place Labels on...

3 minutes read.

JavaFX Rotate Transition

In the JavaFX application, in order to generate the rotate transition, we have to apply rotation transition on any particular shape. It has the ability to rotate the shape along...

4 minutes read.

JavaFX RadioButton

In the JavaFX application, to get the user information in the form of choice from the user, a form is created using radio buttons that allow the user to select...

3 minutes read.

JavaFX Pie Chart

In the JavaFX application, in order to create Pie Chart, the PieChart class is used. The Pie Chart allows us to plot data along with the sectors of the circle....

3 minutes read.

JavaFX Button

The button is one of the UI control present in the JavaFX. The javafx.scene.control.Button class is used for creating a button in javafx example. It is also possible to create...

5 minutes read.

JavaFX Installation

In order to run JavaFX applications, we need to have eclipse and java installed on our machine. Prerequisite: Operating systemAny Operating system (Windows, Linux, Mac)Memory requirementNo minimum requirementDisk SpaceNo minimum requirementJDK versionJDK...

3 minutes read.

JavaFX TextField

In the JavaFX application, to get the user information as input from the user, a form is created using textfields which allows the user to enter input for specific fields....

4 minutes read.

JavaFX Pause Transition

In the JavaFX application, in order to generate the pause transition, we have to apply pause transition on any particular shape. It has the ability to take a particular pause...

4 minutes read.

JavaFX Scale Transition

In the JavaFX application, in order to generate the scale transition, we have to apply scale transition on any particular shape. It has the ability to scale the shape along...

4 minutes read.

JavaFX Glow

In the JavaFX application, in order to apply various glow effect, we use Glow class. It has the ability to glow the colors of the shape. All methods needed for...

4 minutes read.

JavaFX Inner Shadow

In the JavaFX application, in order to apply various Inner Shadow effect, we use this class. It has the ability to create the inner shadow of the given object. This...

4 minutes read.

JavaFX Layouts

Layouts in the JavaFX application are treated as a container for different UI elements such as Button, Label, TextArea, etc. Layouts are used as parent container. The layout is used...

3 minutes read.

JavaFX Convenience Methods

The JavaFX allows us to use various convenience methods to handle events on various nodes in JavaFX applications. The convenience methods provides us easy and effective way to add any...

4 minutes read.

JavaFX Path Transition

In the JavaFX application, in order to generate the path transition, we have to apply path transition on any particular shape. It has the ability to traverse the given shape...

3 minutes read.

JavaFX ProgressBar

In the JavaFX application, in order to show the progress of work ProgressBar is used. It shows how much work is done. In order to use ProgressBar in JavaFX, javafx.scene.control.ProgressBar...

4 minutes read.

JavaFX Translate Transition

In the JavaFX application, in order to generate the translate transition, we have to apply translate transition on any particular shape. It has the ability to translate the shape along...

3 minutes read.

JavaFX Color

In the JavaFX application, in order to draw any shape, we are using classes present in the javafx.scene.shape package. We can fill the colors in these shapes using the setFill()...

6 minutes read.

JavaFX Area Chart

In the JavaFX application, in order to create Area Chart, the AreaChart class is used. The Area Chart allows us to plot data along the XY plane. All methods needed...

3 minutes read.