Pre-defined Styles

This page outlines the appropriate usage of the pre-defined styles in the RTE.

For a full visual guide of the appearance of each of these items see Style Appearance Cheatsheet.

 

Text Styles

Headings

There are currently 10 heading types listed in the Styles dropdown.

  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Fancy H2
  • Fancy H3
  • Fancy H4
  • Fancy H5
  • Fancy H6

Syntactially Heading 2 is the same as Fancy H2, Heading 3 is the same as Fancy H3, and so on. Headings must be used in a hierarchical syntactical fashion and not used to achieve a specific appearance. When used correctly this will improve search engine results and will make your pages more accessible. See Accessible Text, Headings and Documentation for more information proper heading usage.

Featured Text

This is intended to be used when you wish to have a pull-quote within your text or to draw attention to a specific block of text.

Address

The address style has a very specific purpose. It should only be used when providing contact information for a certain page, it should not be used to describe a postal address unless that address is part of the contact information.

Example

This page maintained by: UTM I&ITS
CCT Building, Room 3133
3359 Mississauga Road
L5L 1C6

Preformatted Text

This styles allows you to post your text in a plain, fixed-width font. Spacing and line breaks are preserved exactly as given.

Block Quote Styles

There are two Block Quote styles that appear in the Styles dropdown. These are Large Quote and Person.

Person

This is used within a block quote to acknowledge the individual being quoted.

Red

This style can be used to draw attention to a specific section of text.

Computer code

This style should be used when you wish to have some example of programming code in your pages. In general, this style will be very uncommon in usage.

Center text

This style centres the paragraph.

Deleted text

Use this style concurrently with Inserted Text when you want to acknowledge a change in text. This denotes the portion removed.

Example: In the following example we are acknowledging a change in a date and the removal of an agenda item:

The next meeting is July 29th August 5th. The agenda is as follows

  • Meet up
  • Discuss changes
  • Bring forth problems
  • Vote for next meeting time

Inserted text

Use this style concurrently with Deleted Text when you want to acknowledge a change in text. This denotes the portion being updated or added.

Cited work

Use this on the title of a book, a song, a movie, or other work. For example: Fahrenheit 451 by Ray Bradbury.

 

List Styles

Numbered List Styles

Upper Roman

This style allows you to use uppercase Roman numerals for your numbered list (I, II, III, IV, V, etc.).

Lower Roman

This style allows you to use lowercase Roman numerals for your numbered list (i, ii, iii, iv, v, etc.).

Lower Alpha

This style allows you to use lowercase alphabet characters for your numbered list (a, b, c, d, e, etc.).

Spaced Ordered Default

This is the same as the default numbered list but it places additional spacing between list items.

Spaced Upper Roman

This is the same as the Upper Roman style but it places additional spacing between list items.

Spaced Lower Roman

This is the same as the Lower Roman style but it places additional spacing between list items.

Spaced Lower Alpha

This is the same as the Lower Alpha style but it places additional spacing between list items.

Bulletted List Styles

Arrow List

This style changes the display of the bullet points into triangular arrows.

Checklist

This style changes the display of the bullet points into checkmarks.

Spaced Unordered Default

This style is the same as the default bulleted list but places additional spacing between list items.

Spaced Arrow List

This style is the same as the Arrow List style but places additional spacing between list items.

Spaced Checklist

This style is the same as the Checklist style but places additional spacing between list items.

 

Table Styles

Note: Table styles will only work if the table is set to Styled Table from the Styles dropdown.

Styles applied to the whole table

Styled Table

This style is used to apply formatting to your table cells. Additionally it adds padding to the table cells and displays the table headers in a different colour to better distinguish them. This should be used for all data tables where possible.

Styled Center Table

This style is identical to Styled Table but it also centers the table in your content with equal spacing to either side.

Styles applied to elements within the table

Centered Cell

This aligns the text in the cell to be centered vertically and horizontally.

Centered Top Cell

This aligns the text in the cell to be centered horizontally and anchors the text to the top of the cell. This is useful when you have one cell that causes the row to become very tall.

Top Aligned Cell

This anchors text to the top of a cell but leaves it left-aligned. This is useful when you have one cell that causes a row to become very tall.

 

Div Styles

These have a very specific usage. See Content Grid for details.

Container

Content Grid

Allows a div to be identified as a container of a set of columns.

Columns

1/2 Column

Sizes a column to be 1/2 of its container.

1/3 Column

Sizes a column to be 1/3 of its container.

2/3 Column

Sizes a column to be 2/3 of its container.

1/4 Column

Sizes a column to be 1/4 of its container.

3/4 Column

Sizes a column to be 3/4 of its container.