Learning Objectives:

• What can be styled?
• What are the styling options?
• Styling nodes
• Styling transitions
• Styling swimlanes
• Styling boxes

Model consists of nodes (state, branch, etc.), transitions, boxes and swimlanes, and each of which has components like container area, lines, and labels. All these can be styled to some degree, some supports more styling options while others less.

By styling, we are referring to the background, color, shape, position and other cosmetic look and feel, which do not affect the functioning of the model.

Styling options include:

1. HTML Color Name
2. color HEX code
3. css classes
4. css style

In general the color can be set. Many of the components also support styling by classes and css style which are referred to as advanced styling.

This is the preferred option to style as it's more reliable and predictable, and it's a good way to maintain consistency.

On the components that supports advanced styling, just enter the names of the css classes using space as the delimiter for multiple classes.

All class names must be named with the prefix class_.

The definition of these css classes are set in config/ide.css. The download package comes with two classes: class_GREEN and class_ORANGE. Use these as examples to define your own classes.