How to apply css from one file in UIBinder?

I am working with gwt 2.3 UIbinder.In UIbider one apply css inline to gwt controls.Here is my UIBinderWidget.ui.xml file.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

.important { font-weight: bold; } .grid { border: 1px solid #BBBBBB; height: auto; padding: 3px; }

<g:>
<g:HTMLPanel>
Label,
    <g:Button styleName="{style.important}" ui:field="button" />
    <g:TextBox ui:field="text1" width="15em" />
    <g:Grid ui:field="grid1" styleName="{style.grid}">

        <g:row>
            <g:customCell>
                <g:TextBox ui:field="text2" width="15em" />
            </g:customCell>
            <g:customCell>
                <g:TextBox ui:field="text3" width="15em" />
            </g:customCell>
        </g:row>

        <g:row>
            <g:customCell>
                <g:Button ui:field="buttonA">Button A</g:Button>
            </g:customCell>
            <g:customCell>
                <g:Button ui:field="buttonB">Button B</g:Button>
            </g:customCell>
        </g:row>
        <g:row>
            <g:customCell>
                <g:Button ui:field="addNewRow">Add New Row</g:Button>
            </g:customCell>
        </g:row>
    </g:Grid>

</g:HTMLPanel>

Now in this xml file css which is applied to the gwt controls are in declared above. I want to know it there any way to put all the css in only one file and I am able to开发者_JS百科 apply css from that once css file only?

Instead of writing css in every ui.xml I want to apply from only one file. (Like style.css) Thanks in advance.

You can declare the ui:style like:

<ui:style src='path/to/my/css' />

But in general, I think that is a good practice to keep the HTML with the CSS altogether.