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 Vaadin Application");
title.addStyleName("page-header");

addStyleName will add the page-header CSS class to the title component. Take a look at the HTML Vaadin will render if we add the previous page-header CSS class:

<div class=...