Styling HTML elements

Using the Styles dropdown

The Styles dropdown in the rich text toolbar is available in both the “Full HTML” and “Flex HTML” text formats. It allows content editors to apply stylistic variations to certain HTML elements in your content by applying CSS styles to them.

To add a style, first select the HTML element you want to style, then select the style from the Style dropdown you wish to apply to it.

Image showing the Styles dropdown in the toolbar.

Image showing the Styles dropdown in the toolbar.

List of available styles

HTML Element

Available Styles

Table

Border (1px)

Table

Border (2px)

Table

Padding (0.5em)

Note to developers

Note to developers

The list of available styles can be overridden, if desired. Note, though, that modifications to the default Flex HTML text format should be done in a ways that avoids conflicts with future updates provided by ITS. Use Drupal’s Configuration Override System to safely override these styles. A working example: https://github.austin.utexas.edu/eis1-wcs/utdk_examples/tree/main/configuration_overrides/ckeditor_style_overrides .