Adding Style Sheets

iText DITO templates make use of the Open Web Platform. The templates are therefore to a great extent compatible with CSS style sheets. Advanced users can customize almost all visual properties of a template with CSS. However, since the iText DITO web editor is meant to be used by non-technical users, CSS knowledge is not required. Anyone can modify the visual styling with the designer tool, but CSS of course offers more flexibility.

You can also embed personalized style sheets while integrating iText DITO into the company infrastructure. You can add the relevant styles once, allowing the user to select the style needing to understand CSS.

You can add a new embedded style sheet or use an external one. The style sheets can be linked with elements through element classes. It’s also possible to specify styles without explicitly linking to them. For example:

*[data-dito-element="rich-text"] { color: red;

In this example, all the text in rich text elements would default to red, unless the user explicitly overrides the text color by changing the lay-out.

Applying Styles from a CSS

In your CSS code make sure that the names of styles are preceded by a dot. The CSS below adds a horizontal rule for instance:

.hr  {border-top: 1px solid black;}

To apply this style for instance in rich text element, refer to to the style name (without the dot) in the base section of the element's properties pane.