title: Creating my own Custom widget in GWT and styling it using my own Custom CSS code
body: <p>I have created a custom widget,  basically an Image and a text label.
  What must I do so that I can now set the position of the text ( top/left/bottom of the image for example ) using nothing only CSS?  I mean what methods would my class need so that the CSS styling can be applied to it?</p>
  
  <p>ie  Can I have a css class like so</p>
  
  <pre><code>.ImageAndLabel 
  {
       imagePosition: top;
  }
  </code></pre>
  
  <p>Heres my gwt class</p>
  
  <pre><code>    public class ImageAndLabel extends Composite
      {
          private Label label = new Label();
          private Image img = new Image("/images/pinkBackground.png");
          protected final FlexTable contentTable;
  
          public ImageAndLabel()
          {
              contentTable = new FlexTable();
              initWidget(contentTable);
              label.getElement().getStyle().setFontSize(40, Unit.PX);
              contentTable.setWidget(0,0,img);
              img.setHeight("200px");
              contentTable.setWidget(0,1,label);
              label.getElement().getStyle().setLeft(0, Unit.PX);
              img.getElement().setId("popupImg");
              label.getElement().setId("popupLabel");
          }
  
          public void setText(String text)
          {
              label.setText(text);
          }
      }
  </code></pre>
  
  <p>I guess what I'm after is can I create my own Custom CSS codes?</p>