Style Sheets

GWT widgets rely on cascading style sheets (CSS) for visual styling. Each widget has an associated style name that binds it to a CSS rule. A widget's style name is set using setStyleName(). For example, the Button has a default style of gwt-Button. In order to give all buttons a larger font, you could put the following rule in your application's CSS file: 
.gwt-Button { font-size: 150%; }

Complex Styles

Some widgets have somewhat more complex styles associated with them. MenuBar, for example, has the following styles: 

   .gwt-MenuBar { the menu bar itself }
   .gwt-MenuBar .gwt-MenuItem { menu items }
   .gwt-MenuBar .gwt-MenuItem-selected { selected menu items }

In this example, there are two styles rules that apply to menu items. The first applies to all menu items (both selected and unselected), while the second (with the -selected suffix) applies only to selected menu items. A selected menu item's style name will be set to "gwt-MenuItem gwt-MenuItem-selected", specifying that both style rules will be applied. The most common way of doing this is to use setStyleName to set the base style name, then addStyleName() and removeStyleName() to add and remove the second style name.

CSS Files

Typically, stylesheets are placed in a package that is part of your module's public path. Then simply include a reference to the stylesheet in your host page, such as 

<link rel="stylesheet" href="mystyles.css" type="text/css">

Documentation

It is standard practice to document the relevant CSS style names for each widget class as part of its doc comment. For a simple example, see Button. For a more complex example, see MenuBar.