Skip to main content

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;


  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.


Post a Comment

We appreciate your opinions, suggestions and criticism.

Popular posts from this blog

Web Services with Apache Axis 1.4 Tutorial: server and client sides

Java Sorting: Comparator vs Comparable Tutorial

Creative Commons License Digizol by Kamal Mettananda is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License .
URL of this page must be supplied in attribution
© 2004-2017