Add css styles for gwt widgets

Adding Cascading styles (CSS) to Google Web Toolkit (GWT) widgets is much simpler and involves only two steps.

1. Style name
   • set style name
     for a widget using the $widgetInstance$.setStyleName() method or
   • stick with the default
     style name of the widget (use for setting global values)
     default style name examples:
     • for buttons: .gwt-Button
     • for Check Boxs: .gwt-CheckBox


2. CSS style rule
   • Add CSS style rules to a .css file and import that into the html page
     or
   • write those inside the html page itself. (not recommended)

Let us provide you with an example which would create buttons shown below.


Coding in your java class:

Button cancelButton = new Button("Cancel");
Button loginButton = new Button("Login");
loginButton.setStyleName("buttons");

CSS rules:

.gwt-button {
 background: #EEEEFF;
 color: #0000CC;
 font-size: 12px;
}

.buttons {
 background: #CCCCCC;
 color: #333333;
 font-size: 12px;
}

Share this article please, on :

Share on fb Tweet Share on G+