Styling components with CSS

In this recipe, we will learn how to change the CSS style of components. We'll create a new theme for the Table. Vaadin's Table has gray stripes by default. We will change it. Our new table will be without static stripes. Instead, we will add a style for a dynamic strip. The yellow strip will appear when the mouse hovers over the row.

The following screenshot shows the default style for tables:

The following screenshot shows our new style for tables:

How to do it...

Carry out the following steps to learn how to change the CSS style of components:

1. We create a Vaadin project with the main UI class called Demo as follows:

   public class Demo extends UI {…}

2. In the main class of the init() method, we create a simple Table with some rows. In the following steps, we will create our new style called myTable. We set this style name to the Table. For a better view, we set the number of visible table rows according to the number of items in the table using the setPageLength() method...