Coding Tutorials

In previous post we have learn what is JavaFX CSS and Basic Syntax so visit that post Introduction to JavaFX CSS . 1. Change Background Color     To change background color of any component simply we have to use this syntax.         -fx-background-color: #333333;          2. Add Image to background      To add background image to any component first you have to download any image you want to  add as background image then you have to put this image in CSS folder and you have to add this        CSS syantax into your CSS file.        -fx-background-image:url("logo3.png");              But you can see in above image the image is not set properly. so remove this we have to add another syntax.      -fx-background-size: cover;            3 . Change Background Radius        Background radius can be used to change component corners like make rounded button in JavaFX. to change the background radius just use below syntax.     -fx-background-

What is CSS? Cascading Style Sheets also referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, style of fonts, the spacing between paragraphs, size of columns and layout. Apart from these, you can also control the background images or colors that are used, layout designs, variations in the display for different devices and screen sizes as well as a variety of other effects. Here is an CSS Syntax -:  selector { property: value } In above Syntax,  Selector  − A selector is an HTML tag at which a style will be applied. This could be button, label, tab-pane , etc Property  − A property is a type of attribute of the HTML tag. In simpler terms, all the HTML attributes are converted into CSS properties. They could be color,  border , etc. Value   − Values are assigned to properties. For example, a color p

Step 1:  Create CSS file on your Computer with a dot(.) CSS extension. Step 2: Open your Scene Builder Step 3: Create new fxml file on your Computer. Step 4: Add components in fxml e.g. Anchorpane,button etc. Step 5: In SceneBuilder choose a component that you want to add CSS e.g I want to add CSS to a button then go to properties of the component and click on Stylesheets button. then select CSS file you already created.  Step 6: Now edit your style.css file using any editor and add JavaFX CSS Syntax. - Happy Coding ;)

Challenge to make this design in JavaFX Step 1: I am using Adobe XD to find out color codes from the image. so find out color codes from the image using any method. Step 2: Learn some JavaFX CSS code   https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html Step 3: Now you have to download icons. I used Icon 8 website to download icons for my Design. Step 4: Make a simple design or layout. Step 5: add CSS part to design make the GUI beautiful.   And We done.😍   Watch Video                                                                                            Download file                                       Click here to download file