You can style content within a widget as required by creating a CSS file. As noted earlier in this chapter, it is stored in the ./files/css directory of the widget. The name of the CSS file corresponds to the action it is being loaded for. Typically this will simply be index.css.

When creating your CSS it is possible to override page-wide styles. Typically this is not desirable, so you need to restrict your CSS selectors to the given widget. You can do this by qualifying all selectors with a CSS class that is the same name as the widget.

For instance, you could override all div elements in the CpWidget_custom_example widget by defining a CSS rule of .CpWidget_custom_example div { }.