Pre-defined Styles in the RTE

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.

Large Quote

This can be used to give more emphasis to a block quote by increasing the font-size.

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.

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 acknowleding 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.

See the example in Deleted text.

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.

Image Styles

Note: While images styled with Small Framed Left, Small Framed Right, and Small Framed Center appear smaller they still use the full-scale image which may cause them to slow the loading of your page. See [image best practices link] for more information.

Left

Places the image to the left. The image size will be unaffected. Text will wrap around the image.

Right

Places the image to the right. The image size will be unaffected. Text will wrap around the image.

Center

Centers the image.The image size will be unaffected. Text before the image will appear above. Text after the image will appear on a new line below the image.

Framed Left

Places the image to the left and frames the image with a white border. The image size will be unaffected. Text will wrap around the image.

Framed Right

Places the image to the right and frames the image with a white border. The image size will be unaffected. Text will wrap around the image.

Framed Center

Centers the image and provides a white border around the image. the image size will be unaffected. Text before the image will be above and text after the image will appear below.

Small Framed Left

This style is the same as Framed Left but ensures that the image is no wider than 325px and no taller than 400px. See the note about these Small Framed Left images.

Small Framed Right

This style is the same as Framed Right but ensures that the image is no wider than 325px and no taller than 400px. See the note about these Small Framed Right images.

Small Framed Center

This style is the same as Framed Center but ensures that the image is no wider than 325px and no taller than 400px. See the note about these Small Framed Center images.