How to write css in vaadin?

Hi
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.

I saw this example in Book of
Vaadin
.

<body>
   <div id="v-app">
    <div>
       <div class="v-orderedlayout">
        <div>
           <div class="v-panel">
            <div class="v-panel-caption">Log In</div>
            <div class="v-panel-content">
               <div class="v-orderedlayout">
                <div>
                   <div>
                    <div class="v-caption">
                      <span>Username:</span>
                    </div>
                   </div>
                   <input type="text" class="v-textfield"/>
                </div>
                <div>
                   <div>
                    <div class="v-caption">
                      <span>Password:</span>
                    </div>
                   </div>
                   <input type="password"
                          class="v-textfield"/>
                </div>
                <div>
                  <button type="button"
                          class="v-button">Login</button>
                  </div>
               </div>
            </div>
            <div class="v-panel-deco"/>
            </div>
           </div>
        </div>
       </div>
    </div>
</body>

In that; you got a default class name for all the components you add. But, In my project, I didn’t get the default class names for all the component I add.

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.

</div>
[b]
<div style="height: 781px; width: 762px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div style="overflow: hidden; height: 781px; width: 762px;" class="v-verticallayout">
<div style="overflow: hidden; margin: 0px; width: 762px; height: 781px;">
<div style="height: 573px; width: 762px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
[/b]
<div class="v-customcomponent" style="height: 573px; width: 762px;">
<div class="v-absolutelayout" style="height: 573px; width: 762px;">
<div style="position: relative; overflow: hidden; height: 573px; width: 762px;">
<div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div class="v-tabsheet v-tabsheet-hover-closable hover-closable" style="overflow: hidden; height: 573px; width: 762px;">
. . . 
  1. Does this happened because I adjusted the size of the components during when I design the layouts? or Is this common?
  2. How to avoid this inline styling?
  3. Styling in Vaadin seems to be a little difficult. If I am wrong can you show me the best and standard way to apply styles?
  4. And Do I need to follow any standards or method to design layouts to avoid inline styling?