Font-size for GWT TextBox and Button can't be

Question

I have a GWT button and I want to change the font-size of it to 15pt. In my Project.css, I have set it's font-size.

.gwt-Button {
    font-size: 15pt;
}

But this CSS style doesn't change the font-size of my Button. Is there any other way I could change the font-size of my button?

Answer 1

If you're using a GWT theme, it might very well define the fond-size, so you have to make sure your stylesheet is either loaded after (so it redefines the font-size) or use a more specific selector (input.gwt-Button for instance).
It really depends how, when and where you load your stylesheet and/or the theme stylesheet.

Note that you can inherit the <theme-name>Resources module (e.g. CleanResources instead of Clean) to have the theme's resources copied to the output folder but not automatically loaded, and then load the stylesheet from your HTML host page (using a <link rel=stylesheet href=…> just like any stylesheet), so it's easier to put your custom styles after.

Answer 2

you should not use default stylenames like .gwt-Button because they can have precedence problems . You can set new stylename with .setStyleName("customButton") and then use it in CSS file.

example:

.customButton{
font-size: 15pt;
}

Answer 3

You only have to add the !important flag to your style sheet like

.gwt-Button {
    font-size: 15pt !important;
}

Or use your own style name for your button, e.g. myButton.addStyleName("myButtonStyle"); in your code and

.myButtonStyle {
    font-size: 15pt !important;
 }

in your Project.css file.

This works the same way for your TextBox.