CSS styles can be quickly added to GWT widgets as explained here.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVYo_1bVwuOpexiRsyc7HzhHHb1cx8o1CcFVZ0dhGKZQegWqN0qS-y8lTiC7HD7spVTP5JgHFD8FMVlDoqFVPQ-wrtT9g717zdirYeelNhRZNLXzE8TSS6aGe-wm_itptWhohx9Q/s1600/Add+css+styles+for+gwt+widgets+www.digizol.com.png)
- 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
- set style name
- 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)
- Add CSS style rules to a .css file and import that into the html page
Let us provide you with an example which would create buttons shown below.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bZ0FH7pIf5RJr1O8J6gIGCRxpxId41dEUTMqyIEbAOtq5Iw2g2xEnDq4ifTPtWLtCm6e6Cu6ePZx4pxLNDcWJbHtpAEIjrdRrxKl4uysWXa2tgWi9CRaK6BkhHWfZq9dvZ7Ajw/s400/gwt-css.jpg)
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;
}
COMMENTS