This is a slightly more advanced topic for working in Canvas because it requires a little HTML coding.

• If you don’t want to learn HTML coding, that’s OK! You can still use Canvas proficiently without learning HTML! You can ignore this page.
• If you’d like to learn HTML basics, we recommend that you start with this video. Start experimenting with the Canvas HTML editor a little at a time when you feel ready.
• If you are already an HTML expert, please note that Canvas does not support the full range of all possible HTML tags. You can check out the current list of supported tags and attributes here.

How to HTML in Canvas

All Canvas tools that use the Rich Content Editor (RCE) allow you to edit the HTML code.  To turn on the HTML editor, click the </> button located under the RCE window, on the right side.  When you are done with the HTML editor, click that button again (still located in the same place) to return to the RCE.  Don’t forget to save your work as normal.

---

Text Borders

There are any number of reasons to emphasize certain text elements so that they stand out from the surrounding words; text borders are a very effective way to do so. You can customize the type of border, the thickness of it, the color, and the background color to communicate visually to students that this is something important that they need to see.

Since Canvas’s RCE doesn’t have a built-in border tool, it can be tempting to use a table for this purpose.  Tables, however, can make a real mess for students using assistive technology and hamper their understanding of the material.  Borders are much more accessible, plus they allow for some fun styling options.

Code Snippet and Modifications

Here is the code snippet you can copy and paste into Canvas’s HTML editor to add a text border:

<div style=”width: 80%; margin: auto; background-color: #ffffff; padding: 15px; border: 5px; border-style: solid; border-color: #000000; border-radius: 1px;”>This is my text with a border. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>

This code will produce a basic black text border.  You can modify the code to make it suit your own personality or course needs. Experiment with it in your Canvas sandbox and try out some different options.  Here is an explanation for each element of this <div style> tag:

1. width: the percentage of the screen the box will use
2. margin: the auto setting will keep the box centered between the right and left margins;
3. background-color/border-color: in HTML, colors are represented by 6-digit hex codes; look up your desired color’s code in the RCE or in another online source, for example:
   • UMD Blue: #003764
   • UMD Gold: #FEC24D
4. padding: the amount of space between your text and the border (expressed in pixels)
5. border-style: options include solid, dotted, dashed, double, groove, ridge, inset, outset
6. border-width: the thickness of the border line (expressed in pixels)
7. border-radius: the radius of the corners (expressed in pixels); a higher number gives more rounded corners and a lower number gives corners that are more square

Bonus Code Snippet

Here is a slightly more complex code to try.  It will produce a call-out box that’s great for highlighting key principles, quotations, or other important content on a page. Notice that it specifies margins and positions for text. (The order for margin specs is top, right, bottom, left. Why do you think some margins are expressed in pixels and some in percentages?) Copy and paste it into the HTML editor. Then, try out some different modifications using what you have just learned about borders.

<div style=”margin: 50px 15% 50px 15%; background-color: #CCCCCC;”>

<div style=”position: relative; top: -20px; left: -20px; padding: 20px; background: #FFFFFF; border: 2px solid #CCCCCC;”>Call-out text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>

</div>