Java News Tips Software
Java News Tips Software | Contact | Facebook | Twitter RSS

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");

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

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

Labels: , , ,


  1. Thank you for this very helpful tips, like the way you write.
  2. So if I want to change the global font used by GWt, how would I do that?
  3. You gave me some good information about the Add css styles for gwt widgets
    . thanks keep on updating.
  4. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now.Really the blogging is spreading its wings rapidly. Your write up is a fine example of it. play Texas Holdem.Thank you for spending a time on sharing such informative writings to us.
  5. Very nice mini tutorial.
    many thanks for this.
  6. This comment has been removed by a blog administrator.
Page Views :
Email :
Select Month:
Free counter and web stats