How to apply css to widgets.....Why we have two standard for applying the c

Hi All,

I would like to understand why we have two standard of applying css style to widgets. please clarify.


Approach #1

 .v-label-dataClassUpdate
{
background:	#e8eef7;
color:#1b699f;
}

Label l1=new Label(“Test”);
l1.setStyleName(“dataClassUpdate”);


Approach#2

.risk .v-table-header-wrap {  

        background: #336699; 
}

table.setStyleName("risk");

Another aspect on these two approaches, either one thing only working for specific widget. If any one, have idea of where we need to use approach#1 and where we need to use approach# 2.

Regards
Elangovan

Hi,

This is, as far as I can see, one approach (not two).

In both cases you are setting a component’s stylename (“dataClassUpdate” for the label, “risk” for the table), then you are applying CSS styles to the component having that stylename.

In the case of the label, you are applying the style directly to the
whole component
, while for the table you are applying the style to the
header only
. Some components are more complex and consist of many parts, which you can style separately (e.g table header), and this is of course component-specific.

Finally, in your example you use a different type of selector for the label and the table. When you say setStyleName(“foo”), Vaadin automatically creates both plain “foo” and “-foo” stylenames, which allows for more flexibility. E.g if you used “risk” for both the label and the table, you could still apply styles separately using “.v-label-risk” and “.v-table-risk”. This also allows you to share some styling between the components (e.g .risk { color:red } applies to both, while .v-label-risk { font-size: 3em;} only applies to the label).

So to sum up: One approach, with some flexibility built-in :slight_smile:

Hope that explained a little…

Best Regards,
Marc