Training Resources

Formatting & Styling Text

Formatting and styling text is essential to make your content easier to read. Use our tips, best practices, and accessibility guideliness for choosing appropriate format and style options.

Format Text

located in the Paragraph drop-down

Styles

located in the Styles drop-down

 

The current Format options available include:

Paragraph

Paragraph

The Paragraph format is the default formatting for text in OU Campus. This should be the most frequently used text formatting on the website.

Address



Address

The Address format should be used for emphasizing addresses or locations.


Preformatted



Preformatted

The Preformatted format allows users to post html or css code directly on a webpage for viewers to use.


DIV

DIV

The DIV format closes all sections on the page, and creates a new section in the code.


Blockquote

Block Quote

The Block Quote format pulls out sections of text to emphasize the text.  This should be used sparingly for emphasis.

 

Headings

  • The Headings 1-6 should be used to organize sections of text, like an outline.  
  • These should be used to label and introduce segments on a page, and only to assist the reader in understanding the content.
  • Don't use a heading level just because you like the way it looks.
  • Heading 1 is the format for the Page Heading (located in Page Properties) and should not be used elsewhere.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Any formatting options not explained on this page should almost never be used by web editors. If you feel the need to use any of these options, please contact Web Services for assistance.

 

Font Styles

The Styles drop-down menu sets the style of any selected text.  The styles available are configured by the Web Team, and approved by the University Branding Guidelines.

Note that the Style options function as a toggle menu; to change styles, the user must first de-select the original style choice before selecting the new Style.

Font Styles

Make Image Responsive

This option ensures that the image is responsive, and completely fills the width of the section in which it is located, no matter the size of the section. However this only works on images under the "Insert/Edit Image" pop-up box.

Add Shadow to Element

 

Intro Paragraph

 

This option adds a small shadow to the bottom of whatever is selected.

 

 

This option makes the text larger and should be used for emphasis at the start of a section or page.

Image Class

To edit or add an image style (or class), the user must do so through the "Insert/Edit Image" pop-up box.  Select the image, and click the "Insert/Edit Image" button on the toolbar.  

Upon opening the pop-up box, select the "Class" drop-down box to select one of the following options:

  • (Not Set) - This default setting removes any class or style from the image.
  • (custom) - This setting allows the user to type in a specific class or style not on the predefined list.
  • Make Image Responsive
  • Add a Shadow to Element

Link Class

To edit or add a link style (or class), the user must do so through the "Insert/Edit Link" pop-up box. Highlight or select the link, and click the "Insert/Edit link" button on the toolbar.

Upon opening the pop-up box, select the "Class" drop-down box to select one of the following options:

  • (Not Set) - This default setting removes any class or style from the link.
  • (custom) - This setting allows the user to type in a specific class or style not on the predefined list, such as buttons.
  • Make Image Responsive
  • Add a Shadow to Element

NOTE: When changing the color of text and links, be aware of the readability of the page. Text in multiple colors or colors that are difficult to read may make your page non-accessible.