About the Styles menu


The Styles dropdown menu is a menu in the OU Campus editor toolbar and allows editors to style text and page elements in advanced ways. The Styles menu differs from the Paragraph menu in that Styles do not change the HTML code of the element, where the Paragraph menu does.

When to use


When to use the Paragraph menu: When you are creating section headings and paragraphs. This menu edits the HTML code of the element and is important in creating the hierarchy of information contained on the page. Proper page hierarchy helps people using assistive devices to navigate webpages efficiently. See How to add or edit page headings for more information.

When to use the Styles menu: When you are styling text and elements for visual interest only. The Styles menu formats elements by inserting classes and styles into the existing HTML element - so a paragraph styled via the Styles menu will still be considered a paragraph by assistive devices, even if it is styled to look like a heading. This can cause trouble for people using assistive devices because the hierarchy of information on the page will not be communicated to them because it only appears visually. 

Styles can only be applied to HTML elements such as paragraphs, headings, images, and links. If the Styles menu is not letting you make a selection, the item you are trying to style is not able to be edited via the Styles menu. 

What each item in the Styles menu does


  1. Center Text - centers text within the containing element
  2. Text Shadow - applies a shadow on text. This should not be used on text appearing on light backgrounds.
  3. White Text - applies a white color class to text. This should only be used to increase text contrast on dark backgrounds or photos. 
  4. Mikado Text - applies a yellow color class to text. This should only be used to increase text contrast on dark backgrounds or photos. This color is not high enough contrast to be used on white or light backgrounds. 
  5. Lead Paragraph - applies an increased text size class. This should be used sparingly to draw attention to certain text. 
  6. Image Mask 2 - applies a dark, patterned overlay to photos. 
  7. Image Mask 1 - applies a darker patterned overlay to photos.
  8. Responsive Image - applies a fluid image class to photos. Use this to make images resize automatically to fit their containers. Great for making images on pages responsive to mobile view. This class is applied automatically to images appearing in Card snippets and components.
  9. Screen Reader Only Text - applies a class to text making it invisible to users without assistive devices. Use for additional descriptive text for screen reader users.
  10. Section Header - applies a class to text that adds two horizontal lines to either side of the text. Great for adding additional style to HTML headings such as Heading 2. Use this to further differentiate sections in the visual information hierarchy of a webpage.
  11. Responsive H1 Style - applies size and font classes to mimic the appearance of the Heading 1 paragraph style. This is for use in the Banner section of webpages only. The main Heading 1 of a page should appear at the top of the Main Content. This class exists to be be added to Banner sections without disrupting the information hierarchy of webpages. 
  12. Responsive H2 Style - applies size and font classes to mimic the appearance of the Heading 2 paragraph style. This is for use in the Main Content section of webpages. This allows editors to give visual weight to text without changing the HTML tag of the element. This is for use in snippets to style cards and other elements without disrupting the information hierarchy of webpages. 
  13. Responsive H3 Style - applies size and font classes to mimic the appearance of the Heading 3 paragraph style. This is for use in the Main Content section of webpages. This allows editors to give visual weight to text without changing the HTML tag of the element. This is for use in snippets to style cards and other elements without disrupting the information hierarchy of webpages. 
  14. Responsive H4 Style - applies size and font classes to mimic the appearance of the Heading 4 paragraph style. This is for use in the Main Content section of webpages. This allows editors to give visual weight to text without changing the HTML tag of the element. This is for use in snippets to style cards and other elements without disrupting the information hierarchy of webpages. 
  15. Responsive H5 Style - applies size and font classes to mimic the appearance of the Heading 5 paragraph style. This is for use in the Main Content section of webpages. This allows editors to give visual weight to text without changing the HTML tag of the element. This is for use in snippets to style cards and other elements without disrupting the information hierarchy of webpages. 
  16. Heading Font - applies a font class to a text element to mimic the appearance of the Heading Font. 
  17. Button Link (Holly Background) - applies several classes to a text link to make it appear as a green button with white text. Upon hover, the button changes to a yellow background with green text. This is the preferred class for buttons appearing in Main Content.
  18. Button Link (Primary Background) - applies several classes to a text link to make it appear as a green button with white text. The menu shows it as blue, but the green is slightly lighter than Holly.
  19. Button Link (Pine Outline) - applies several classes to a text link to make it appear as a clear button with a green outline and green text. Upon hover, the button changes to a green background with white text.