How do I use CSS to style my form components?

Question

How does Vaadin use CSS that was written purely for HTML elements (e.g. styling and layout of body, h1, etc elements) and use that exact CSS style in Vaadin?

Does one need to make changes on the CSS to map to corresponding Vaadin elements, or can one use that CSS as is?

Answer 1

You can use the CSS as is, but you'll (naturally) have to tell Vaadin which CSS classes to use by calling

myComponent.setStyleName("myStyleClass");

or

myComponent.addStyleName("myStyleClass");

The difference between the two is that setStyleName replaces all existing styles with the provided one and addStyleName doesn't replace anything but adds the provided style for the component.

You can also modify your CSS to override default Vaadin styles, for example

.v-panel .v-panel-content {
    background: yellow;
}

would change every Panel's background color to yellow.

I recommend that you create a new theme which is based on an existing Vaadin theme. Here's how to:

1. Create a directory in the VAADIN/themes/ directory (eg. VAADIN/themes/myTheme).
2. Create styles.css in your theme directory.
3. Add @import "../runo/styles.css"; to the beginning of your styles.css (you can replace runo by any other existing theme).
4. Call setTheme(myTheme); in your Vaadin application class.
5. If you want to apply application-wide styles, override the Vaadin component CSS definitions in your styles.css. If you don't know the names of the CSS classes, you can use firebug and check the HTML elements' classes.
6. If you want to create a component-specific style, define it in styles.css and call setStyleName or addStyleName methods.

See the CSS entry in the Book of Vaadin here.

Answer 2

Does one need to make changes on the CSS to map to corresponding Vaadin elements, or can one use that CSS as is?

You can use your own CSS styles (just as it is) and it can use for either individual components (as said by "miq*" earlier) or entire page. `

Here is a link for more info:
https://vaadin.com/book/-/page/themes.css.html

Answer 3

As far as I can tell from looking at the demos, Vaadin just generates HTML, so yes.