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 Menu

In the JavaFX application, in order to create a menu, menu items, and menu bar, Menu, MenuItem, and MenuBar class is used. The menu allows us to choose options among...

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 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 Light Point

In the JavaFX application, in order to apply various LightPoint effect from a single source, we use this class. It has the ability to apply light from a single source...

4 minutes read.

JavaFX Gradient 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 gradient colors in these shapes using the...

7 minutes read.

JavaFX Stroke Transition

In the JavaFX application, in order to generate the stroke transition, we have to apply stroke transition on any particular shape. It has the ability to give different color strokes...

4 minutes read.

JavaFX Scaling

In the JavaFX application, in order to apply various Scaling effects, we use this class. It has the ability to change the size of the given object. All methods needed...

5 minutes read.

JavaFX HyperLink

In the JavaFX application, in order to access and use webpages, hyperlinks are used. In HTML anchor tags are used in the same way in JavaFX hyperlinks are used. To...

4 minutes read.

JavaFX Bar Chart

In the JavaFX application, in order to create Bar Chart, the BarChart class is used. The Bar Chart allows us to plot data along different bars to show the scales...

4 minutes read.

JavaFX Slider

In the JavaFX application, in order to slide over a range of data having values, Slider is used. It provides a pane with a Slider to move over a range...

4 minutes read.

JavaFX File Chooser

In the JavaFX application, in order to open or save the file, FileChooser is used. It allows user to choose the file from system location and save it in a...

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 Image Input

In the JavaFX application, in order to apply various image input effect, we use the ImageInput class. It has the ability to fill the specified shape with a given image...

4 minutes read.

JavaFX Rectangle

In the JavaFX application, in order to draw a rectangle, the Rectangle class is used. The Rectangle allows us to join any four points with x and y coordinates in...

4 minutes read.

JavaFX Parallel Transition

In the JavaFX application, in order to generate the parallel transition, we have to apply parallel transition on any particular shape. It has the ability to execute multiple transactions parallelly....

4 minutes read.

JavaFX Line Chart

In the JavaFX application, in order to create a Line Chart, LineChart class is used. The LineChart allows us to plot markers point according to the entities on number axes....

4 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 Event Filters

In JavaFX, in order to handle the event which are created by any of the mouse action, keyboard action, rotate action, scroll action Event filters are used. The event filters...

3 minutes read.

JavaFX Scatter Chart

In the JavaFX application, in order to create Scatter Chart, the ScatterChart class is used. The Scatter Chart allows us to plot data along the x and y axis of...

4 minutes read.

JavaFX Shear

In the JavaFX application, in order to apply various shear effect, we use this class. It has the ability to shear the given object along the x or y axis....

3 minutes read.