Styling the Syntax Highlighter

I am using the Syntax Highlighter Evolved by Alex Gorbatchev and for those of you who are curious, this is how I styled the code block.

I have added a border and change the font size to 16px so that it could better fit into the post.

.syntaxhighlighter {
	background-color: white !important;
	border: 1px solid #DADAD9 !important;
	margin-bottom: 20px !important;
}

body .syntaxhighlighter .code {
	font-size: 16px !important;
}

body .syntaxhighlighter .gutter {
	font-size: 16px !important;
}

JavaFX: Applying CSS style to a scene

This entry is part 43 of 55 in the series JavaFX

Instead of using the default styles provided by JavaFX, we can create an entirely different look and feel for the application.

For now, we work out a  simple style sheet named style.css that specifies the font to use for the text and the background color and we apply them to the scene instead of individual elements such as the button or the text.

.root
{
    -fx-background-color: lightblue;
    -fx-font-family: "serif";
    -fx-base: #000000;
    -fx-font-size: 24px;
}

As for the code, we apply the CSS style to the scene as shown below.  Note that we are applying the style to the entire application as we are using the .root style class.

package javafxapplication13;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;

public class JavaFXApplication13 extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 500, 300);
        scene.getStylesheets().add("javafxapplication13/style.css");
        
        stage.setScene(scene);

        Label lb = new Label("Stay Calm And Keep Learning");
        Image image = new Image(getClass().getResourceAsStream("cloud.jpg"));
        lb.setGraphic(new ImageView(image));
        lb.setContentDisplay(ContentDisplay.BOTTOM);

        stackpane.getChildren().add(lb);

        stage.show();
    }

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

}

style

JavaFX: Designing A Button Using CSS

This entry is part 21 of 55 in the series JavaFX

JavaFX supports the standard CSS3 format and this allows us to design JavaFX interface using standard web page design technique.

Let us first create a new file called style.css.

First add a CSS file called style.css as shown in the screenshot below.

css

In our program, we will have to set the scene to use the style sheet using the statement below.

scene.getStylesheets().add("javafxapplication19/style.css");

Once the scene knows the path of the stylesheet, to apply the design to the button, we use a statement similar to below.

btn.getStyleClass().add("button1");
stylesheet
package javafxapplication19;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class JavaFXApplication19 extends Application {
 
    @Override
    public void start(Stage stage) {
 
        stage.setTitle("JavaFX Program!");
 
        StackPane stackpane = new StackPane();
 
        Scene scene = new Scene(stackpane, 300, 250);
        scene.getStylesheets().add("javafxapplication19/style.css");
        stage.setScene(scene);
 
        Button btn = new Button("Codecrawl");
        btn.getStyleClass().add("button1");
 
        stackpane.getChildren().add(btn);
 
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
 
}

button

Here is the style.css file where we have used to set the font and base color of the button.

.button1 {
    -fx-font: 16 arial; 
    -fx-base: #9CB6CF;    
}

 

 

HTML5: Styling a form

This entry is part 32 of 34 in the series HTML5

There are 3 states to a form field and using the 3 states, we could style a form accordingly.

  • valid: A form element receives this class when its contents are valid according to the element type and the validation.
  • invalid: If the form element has incorrect content, then the invalid class is applied.
  • required: Any form element that has this attribute will be assigned this class.
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Form Styling</title>
    <style>
        * {
            margin: 0;
            font: 13px tahoma, verdana, sans-serif;
            padding: 0;
        }

        form {
            padding-top: 10px;
            width: 310px;
        }

        li {
            clear: both;
            list-style-type: none;
            margin: 0 0 10px;
        }

        label {
            display: block;
            float: left;
            margin: 0 10px 0 0;
            padding: 5px;
            text-align: right;
            width: 100px
        }

        input {
            background-position: 3px 5px;
            background-repeat: no-repeat;
            border-radius: 5px;
            padding: 5px 5px 5px 25px;
            width: 155px;
        }

        input:focus {
            outline: none;
        }

        input:invalid:required {
            background-image: url(//codecrawl.com/code/images/asterisk.png);
            box-shadow: 0px 0px 5px #f0bb18;
            border: 2px solid #f0bb18;
        }

        input:focus:invalid {
            background-image: url(//codecrawl.com/code/images/invalid.png);
            box-shadow: 0px 0px 5px #b01212;
            border: 2px solid #b01212;
        }

        input:valid {
            background-image: url(//codecrawl.com/code/images/accept.png);
            border: 2px solid #7ab526;
        }

        input[type=submit] {
            background: #7ab526;
            border: none;
            box-shadow: 0px 0px 5px #7ab526;
            color: #fff;
            cursor: pointer;
            float: right;
            font-weight: bold;
            padding-left: 5px;
            width: auto;
        }
    </style>
</head>
<body>
<form>
    <ol>
        <li><label for='tel'>Tel:</label><input placeholder='eg: 012345' required type='tel' id='tel' name='tel'/></li>
        <li><label for='website'>Website:</label><input required type='url' id='website' name='website'/></li>
        <li><label for='email'>Email:</label><input required type='email' id='email' name='email'/></li>
        <li><input type='submit' value='Send the form'/></li>
    </ol>
</form>

</body>
</html>

HTML Table: Formatting all tables and cells the same way

This entry is part 13 of 16 in the series HTML Table

To format all tables and cells the same way, define the attributes in an embedded style sheet.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            border-style: dotted;
            border-color: red;
            border-width: 1px;
        }

        td {
            border-style: dashed;
            border-color: green;
            border-width: 1px
        }

    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>