Costumizing GWT application with CSS - basics.

OK, working with wikitube project on these holidays managed me to step out from PHP development and move to world of Java. Looked hard a little, but, you know, being developer automatically moves you to another type of persons - "problem solvers", which means you work only with what you have.
First a little history; I,ve made real good CSS and HTML layout, but as all those layouts it static and solid things looks nice only if nothing changes - no refresh or dynamic part, but when it comes to add dynamic, variables, databases, queries, scripts, etc you have to face the real challenge.
So we have database driven web APP, with really creative design, but without working CSS from basic HTML layouts.
I will not get deeper about my layouts or specific id,s, I want to show some basic ideas how to drive GWT with your designed CSS.
I will start with simple "Hello world", button and image styling, I will not also explain how to install GWT and set up your IDE (mine is Netbeans), if do not know Use GWT and Netbeans web pages to handle those questions.
Ok firs the main java code - I,ve placed all instructions inside the code as comments - here it is:

package org.yournamehere.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Image;

/**
* Main entry point.
*
* @author Janis Janovskis
*/
public class MainEntryPoint implements EntryPoint {
/**
* Creates a new instance of MainEntryPoint
*/
public MainEntryPoint() {
}

/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
* so first initialize main Module or what wee will see on the sample page
*/
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");
final Image image = new Image();
image.setTitle("This is test image");
image.setSize("30px", "30px");
// Below I am setting class name to my button.
button.setStyleName("special");
// this is unnecesary I was just experimenting - I am assingnig specific
// to my "button"
DOM.setElementAttribute(button.getElement(), "id", "new");
// Handleling events

button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
label.setVisible(!label.isVisible());
}

});
// and dispalaying content.
RootPanel.get().add(button);
RootPanel.get().add(label);
RootPanel.get().add(image);
}
}

Then comes CSS code - I use separate file always (Remember it is W3 recommendation too), but you can do that in

section also. So CSS code:
/*
Do not place body tag in your page it generates by script and server
*/
body {
background-color: #686868;
}
/*
remember I,ve assigned new class to my button.
*/
.special {
background-color: #B80000;
height: 25px;
width: 100px;
-moz-border-radius: 4px;
text-align: center;
border-style: solid;
border-width: 2px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
/*
some styling of image
*/
.gwt-image {
border-style: solid;
border-color: #ffffff;
border-width: 6px;
-moz-border-radius: 4px;
margin: 10px auto 10px auto;
}

and finally the result:

No Java

I hope it helped to you a little and I will continue post more on this in a wild.