title: How to write CSS in Vaadin 6?
body: <p>I'm doing a project in Vaadin 6. I created all the layouts for my project. But, I got stuck in CSS styling. I couldn't find any easy way to apply CSS styles to my layouts.</p>
  
  <p>I saw this example in Book of <a href="https://vaadin.com/book/-/page/themes.css.html">Vaadin</a>.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="v-app"&gt;
  &lt;div&gt;
     &lt;div class="v-orderedlayout"&gt;
      &lt;div&gt;
         &lt;div class="v-panel"&gt;
          &lt;div class="v-panel-caption"&gt;Log In&lt;/div&gt;
          &lt;div class="v-panel-content"&gt;
             &lt;div class="v-orderedlayout"&gt;
              &lt;div&gt;
                 &lt;div&gt;
                  &lt;div class="v-caption"&gt;
                    &lt;span&gt;Username:&lt;/span&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;input type="text" class="v-textfield"/&gt;
              &lt;/div&gt;
              &lt;div&gt;
                 &lt;div&gt;
                  &lt;div class="v-caption"&gt;
                    &lt;span&gt;Password:&lt;/span&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;input type="password"
                        class="v-textfield"/&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;button type="button"
                        class="v-button"&gt;Login&lt;/button&gt;
                &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="v-panel-deco"/&gt;
          &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>In that; they got a default class name for all the components they add. But, In my project, I didn't get the default class names for all the component I add.</p>
  
  <p>Instead of getting styles applied through classes, I'm getting styles applied through inline function. I think, it is because I adjusted the size of the components when I design the layouts.</p>
  
  <p>My Code:</p>
  
  <pre><code>&lt;div style="height: 781px; width: 762px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;"&gt;
  &lt;div style="float: left; margin-left: 0px;"&gt;
  &lt;div style="overflow: hidden; height: 781px; width: 762px;" class="v-verticallayout"&gt;
  &lt;div style="overflow: hidden; margin: 0px; width: 762px; height: 781px;"&gt;
  &lt;div style="height: 573px; width: 762px; overflow: hidden; padding-left: 0px; padding- top: 0px;"&gt;
  &lt;div style="float: left; margin-left: 0px;"&gt;
  &lt;div class="v-customcomponent" style="height: 573px; width: 762px;"&gt;
  &lt;div class="v-absolutelayout" style="height: 573px; width: 762px;"&gt;
  &lt;div style="position: relative; overflow: hidden; height: 573px; width: 762px;"&gt;
  &lt;div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px; right: 0px; bottom: 0px;"&gt;
  &lt;div class="v-tabsheet v-tabsheet-hover-closable hover-closable" style="overflow: hidden; height: 573px; width: 762px;"&gt;
  </code></pre>
  
  <ol>
  <li>Does this happened because I adjusted the size of the components during when I design the layouts? or Is this common?</li>
  <li>How to avoid this inline styling?</li>
  <li>Styling in Vaadin seems to be a little difficult. If I am wrong can someone show me the best and standard way to apply styles?</li>
  <li>And Do I need to follow any standards or method to design layouts to avoid inline styling?
  . . . </li>
  </ol>