Overriding default CSS properties in GWT

For some applications you may want to change CSS properties for some standard UI elements in the google web toolkit. For instance, you may want all buttons to use a large font, displayed in blue. Now, if we look at the standard css poperties of a gwt button, as defined in the `standard.css' file included in the GWT-user.jar file, it says:

.gwt-Button {
margin: 0;
padding: 3px 5px;
text-decoration: none;
font-size: small;
cursor: pointer;
cursor: hand;
background: url("images/hborder.png") repeat-x 0px -27px;
border: 1px outset #ccc;
}

Here, the font size is set to small and no color is set. So, an obvious attempt would be to (re)define the font-size and color properties in our application css:

gwt-button {
color: blue;
font-size: x-large;
}

This way, you can make any changes you want. However, you may be surprised that in some cases your changes are ignored! This has to do with the order in which the css files are processed, and the css precedence rules: Obviously, we have two conflicting styling rules here, and in that case the FIRST RULE that was processed TAKES PRECEDENCE.

Now, it depends on how you include your css file whether it is processed before or after the GWT system css file:

• If you include your application css file from the host html page, it will be processed *after* the GWT system css file. Any changes that conflict with the default css values will be ignored. In this case, only the color change has been picked up, since it was not defined before, whereas the font-size has been ignored.
• If you include your application css file form your module xml file using a element, your css file will be processed *before* the system css file, and *all* the changes will take effect. (At least, that's my empirical observation.)

To see which styles are applied and in which order, you can use the invaluable firebug debugger from within firefox.

Of course, the wisest thing to do is not to tamper with GWT standard styles, but to define and assign a secondary style, although this does require java code.