O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding CSS classes to components

In the previous section we created a rule to change the way every Label component was rendered. We had two labels in our application so both of them where changed. What if we want to change the style only for the title label? We can't keep using the v-label CSS class for our rule because it will change all the labels. We have to change the rule to something like this:

.page-header {
  color: #fff;
  background: #4455aa; 
  font: 16px Verdana, Arial;
  padding: 5px;
  margin-bottom: 10px;
}

Instead of using v-label we use .page-header (note that the dot is required to define a rule for a CSS class). But Vaadin doesn't know anything about page-header. We must explicitly add the CSS class in our Java code:

Label title = new Label("My ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required