HtML UI Standardization and CSS override

It is important in large applications to standardize HTML elements styling in order to avoid UI inconsistencies. More importantly, standardizing styling of HTML tags reduces the need for using CSS (Cascading Style Sheets) for each HTML element separately, which mean less overhead and less time to initial page load.

Here is how it works:

1. Create a HtmlUtil.java class:

    public static String h1(String text)

    {

return "<h1 class='h1'>" + text + "";

    }

2. Create main.css:

h1,.h1 {

font-size: x-large;

font-weight: bold;

padding: 4px;

margin: 4px;

}

h2,.h2 {

font-size: large;

color: gray;

padding: 4px;

margin: 5px;

}

...

3. Use HTML tag to override any CSS styling:

HTML panel = new HTML(HtmlUtil.h3("your text here..."));

Note that functions have HTML tag name as well as a CSS function name, in which you can use the latter to style Element like lable, VerticalPanel, etc.