How to write CSS in Vaadin 6?

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>

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.

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.

My Code:

<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;">
<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;">

Does this happened because I adjusted the size of the components during when I design the layouts? or Is this common?
How to avoid this inline styling?
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?
And Do I need to follow any standards or method to design layouts to avoid inline styling? . . .

Solution

In Vaadin 6 any component styling done within Java code (for example, component.setWidth() and so on) is inserted directly as inline css. If you don't want it inline, you can define those rules by hand in the styles.css file under your VAADIN/themes/themename/ directory, and set the @Theme("themename") annotation on your Application class.

But if you want to do CSS styling, you really should move to Vaadin 7 -- Jouni and others have really cleaned everything up remarkably (primarily by dropping legacy IE support), which makes styling using CSS actually practical. You also get to use SASS now. For more info, look at the Vaadin Wiki.

Edit:
To answer #4 on your list, my approach is to make a CustomComponent that has a CustomLayout (link) as the base layout. (Or instead of extending CustomComponent you could extend CustomLayout, I suppose.) I use a pageXLayout.html as the skeleton or template, and wherever I want an interactive or changeable part of the page (button, edit field, graph, 'view', etc) I put a <div location="componentY"></div> tag. Then you can fill in those divs whenever you need to (on initialization, on lazy loading, in response to server event or user-interaction, etc.), even remove them and replace them as needed.

So, that may all be too obvious. But the great thing about this way of building up a page is that as long as you not do any server-side sizing or any changes that would affect the component's visual style, you will have a final html page that is completely absent of any inline styling. You can do all visual styling through changing the existing Vaadin css classes or by adding your own id (component.setId("myId")) or class (component.addStyleName("myStyle")). You could also just add ids and class names to the location div itself (<div location="componentY" class="myClass"></div>) if that's easier. But sometimes those styles might be overridden by the component's own Vaadin-based css (which you can change yourself in your myTheme.scss or myTheme.css file).

(The previous is assuming Vaadin 7. 6 might still add inline styling, I forget.)

Anyway, that's how I've ended up building what is essentially designer-friendly html and css-based single-page webapps the easy way. You can even add whatever javascript-based front-end chrome you want, but that's a bit more indepth and tricky with the way GWT apps handle page reloading and state.