external CSS in UiBinder

[Roy Bean]

Hi, I'm new in GWT, so this is probably a big NOOB mistake :P

I decided to use UiBinder do to my widgets, So i am tryng to understand CssResources example.

So @ the moment i have in oackage client the following code:

MyFirstComponent.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>
	</ui:style>
	
	<g:HTMLPanel>
		<g:HTML ui:field="html_field"> Click in Button for an Action </g:HTML>
		<g:Button ui:field="button"> Click Me </g:Button>
	</g:HTMLPanel>
</ui:UiBinder>  

MyFirstComponent.java

public class MyFirstComponent extends Composite {
	
	private static MyFirstComponentUiBinder uiBinder = GWT
			.create(MyFirstComponentUiBinder.class);

	interface MyFirstComponentUiBinder extends
			UiBinder<Widget, MyFirstComponent> {}

	@UiField 
	Button button;
	HTML html_field;
	
	public MyFirstComponent() {
		initWidget(uiBinder.createAndBindUi(this));
	}
	
	@UiHandler("button")
	  void handleClick(ClickEvent e) {
	    Window.alert("Hello, AJAX");
	  }
}

and the Entry Point:

public class HelloUiBinder implements EntryPoint {
 
     public void onModuleLoad() {
    	  RootPanel.get().add(new MyFirstComponent());
     }
}

then i tried to make a client bundle to loas my css
test.css:
.html { border-style: solid 1px black; background-color:whitesmoke; } .botao { font-size: 150%; cursor: help; }

and the clientBundle

public interface Resources1 extends ClientBundle {
     
	@Source("test.css")
    CommonsCss style();
  
	public interface CommonsCss extends CssResource {
	    String html();
	    String botao();
	}
}

But now i am stuck, i realy dont know what to do :$
how do i make the css to this 2 elements from a external css

thanks in advance