2011-08-20

Several ways to inject CSS in GWT

There are several ways in GWT to include CSS into you code:

  • via *.gwt.xml using 
    • <stylesheet src="my.css"/>
  • via your container.html using 
    • <link href="my.css" rel="stylesheet">
    • <style>/* my CSS */</style>
    • <style>@import url("my.css");</style>
  • via *.ui.xml using
    • <ui:style>/* my CSS */</ui:style>
    • <ui:style>@import url("my.css");</ui:style>
    • <ui:style src="my.css"/>
      • in this case your CSS is checked for validity, so you can't use some CSS3 yet
    • <ui:style import="my.project.CSSResource">
      • whereby my.project.CSSResource has to be annotated with @Shared 
  • via the @Source annotation using [in this case your CSS is checked for validity, so you can't use CSS3 yet]
    • @Source("my.css") MyCSS myCSS(); within an interface called (in this case) My that extends ClientBundle with a nested interface called (in this case) MyCSS that extends CssResource
If you know other ways to insert CSS into a GWT app, I'd appreciate if you share them writing a comment!