Applying CSS classes in Content Blocks

You can apply unique styling and formatting to an HTML element within a content block by using the source code editor to apply a CSS class to that element. Applying CSS classes to content blocks makes it easier to use them for disclaimers, special notes, and call-outs that are visually distinguished from other content.

You cannot apply a class to a single word or a sentence in a larger paragraph. However, you can apply a class to a standalone piece of text, a code block, a quote block, or a list.

Note: To apply custom classes, you must have defined them already in the theme that you are using.

To apply a CSS class to a block of text in a content block

1. In Guide, click Guide admin at the top of the page, then click the Manage articles icon () in the sidebar.
2. In All articles, open the article you want to add a content block to or edit a content block for.
3. Next, create a content block or edit a content block.
4. Within the content block editor, click the source code icon () in the toolbar. Apply the CSS class attribute to the high level HTML element that you want to style as shown in the following example:

   <div class=”type-class-name-here”>This is the text that you want to format.</div>

5. Click Apply. After you apply a CSS class to text, the text is visible as a CSS styled block in the content block editor. You can click within the CSS border to add more text to the tagged element, or you can click outside of the border to add or edit content to the content block.

   

6. When you are finished adding or editing the content block, click Create or Update all articles.
7. Preview or publish the article.