Apply styles to GWT widgets

Question

I have just started to explore GWT, and i'm bit confused with different ways of applying styles to GWT widgets.In gwt docs, there are 4 ways by which you can override default style of a widget,

1) Using a tag in the host HTML page.(Deprecated) 2) Using the element in the module XML file.(Deprecated) 3) Using a CssResource contained within a ClientBundle. 4) Using an inline element in a UiBinder template.

Suppose i have a CSS file in some package say, com.abc.xyz.styles.css .And the file has the following contents,

/**the panel itself**/
.gwt-TabLayoutPanel {
    border: none;
    margin: 0px;
    padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
    background-color: #6F6F6E !important;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
    background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
    font-family: Arial !important;
}

/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    border: none;
    margin: 0px;
    overflow: hidden;
    padding: 15px;
}

How will i inject this css file ? How can this be done using the 3rd and 4th option of styling mentioned above?.

Andrei Volgin Andrei Volgin · Accepted Answer · 2014-06-10T15:13:11

You can simply add your CSS file to the host page. Then you can use the full power of CSS selectors. This is my preferred method of using CSS in GWT:

What the best strategy to structure CSS in GWT?

Apply styles to GWT widgets

1 Answers