Formatting & Styles

Font Format | Font Styles  | Editing Image Styles  | Editing Link Styles

Font Format

The Format drop-down lists built-in styles that can be applied to selected text. To apply a style from the Format drop-down, click within the paragraph (or selected text), and then click the desired style from the drop-down.

Font Formatting

The current Format options available include:

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

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



Preformatted

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

DIV

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

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.  These should be used to label and introduce segments on a page, and only to assist the reader in understanding the content.

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.

Section  |  Article  |  Header  |  Footer  |  Aside  |  Figure

Font Styles

The Styles drop-down menu sets the style of any selected text. Due to accessibility requirements, the color options previously available were removed in 2018. 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

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

Editing Image StylesImage 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

Editing Link StylesLink 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.