Time for action – using custom CSS classes

Very often when building a user interface, there will be a need to repeat styles across different components in the application. Instead of using the generic class type, or having to encode multiple styles on a part-by-part basis, CSS classes can be used to define a standard style and applied to individual widgets.

A label will be added to the sample part and associated with a CSS style, and that will be stored in the default CSS file.

1. Open the Hello class and go to the create method that creates the part's UI.
2. At the end of the method, add a new Label, which will be used to demonstrate the styling:

   Label label = new Label(parent, SWT.NONE);
   label.setText("Danger Will Robinson!");

3. Associate the label with a custom CSS class using the setData method on the SWT widget along with the org.eclipse.e4.ui.css.id key and the name of the CSS class:

   label.setData("org.eclipse.e4.ui.css.id", "DireWarningMessage");

4. Finally...