Override GWT Styling

Question

I had a beautiful pure HTML mockup for a webpage that I am now recreating in GWT. I\'m attempting to use the same css in my GWT app, but that\'s not working well for me. G

Answer 1

The reason your style is being overridden is that when gwt compiles your project, it includes it's own default css file. The type of css file is dependent on the type of default styling that you are using:

In the above scenario, a clean.css file will be included, which, in turn, has the following generic styles that completely offset your template (the margin and background parameters always messed my templates up):

body, table td, select, button {
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-size: small;
}
pre {
  font-family: "courier new", courier;
  font-size: small;
}
body {
  color: black;
 margin: 10px;
 border: 0px;
 padding: 0px;
 background: #fff;
 direction: ltr;
}
a, a:visited {
  color: #0066cc;
  text-decoration:none;
}

a:hover {
  color: #0066cc;
  text-decoration:underline;
}

select {
    background: white;
}

If you remove them, and leave everything else intact (specifically, if you leave everything that starts with 'gwt'), your template won't be affected.

Don't forget -- you have to remove these elements every time you compile your project.

Hope this helps.