A Note About Exercises:

Each exercise in the Beginning Users module will start with an explanation and an example. Then, you'll get the raw code snippet (a word for a specific piece of code), followed by an anatomy lesson! The anatomy of the code will show you the parts of the snippet and what they do. Finally, you'll get a set of 'How To' steps (including modifications) with notes, troubleshooting tips, and additional examples as needed!

Horizontal Line Break

It is an online pedagogical best practice to break up large pages of text into more easily digested chunks and to clearly delineate these chunks with white spaces, text boxes, line-separators, and other tools. The Rich Content Editor in Canvas does not provide for this. However, a single, simple line of code can make this happen by placing a horizontal border line on a Canvas page, like so:

The Code Snippet

Anatomy of the Code Snippet

A description of the code snippet's parts.

Steps to Create a Horizontal Line on a Canvas Page

Select and copy the code snippet.
Navigate to an existing Canvas page and go to Edit mode.
Scroll down to the point where you would like to place your line, insert your cursor after the last line of text before your planned line, and then hit Enter twice. (You can also skip straight to the HTML Editor if you'd just like to play with this code on a fresh new page!)
Switch to the HTML Editor.
Scroll down until you see the desired line of text followed by the two "<p> </p>" lines that were created by hitting Enter twice.
Place your cursor after the first "<p> </p>" code and hit Enter.
Paste the copied code snippet there.
Switch back to the Rich Content Editor to view the results!

Modify the Code

Raise the number of pixels (yellow highlighted text above) to make the line thicker. Examples below!
Replace the blue highlighted text in the code snippet above with the color you want to use.
- Color names that are sure to work: black, blue, red, green, purple, yellow, orange, and pink!

Troubleshooting

If you find that a line of text is crowding your horizontal line, either before or after the line, go back to the HTML Editor, scroll down to the line of code you added and place a "<p> </p>" (without the quotation marks) before or after it as appropriate.

Examples

Black line 1px thick

Red line 6px thick

Purple line 12px thick

Pink line 24px thick