Instructions: The content on this page is for faculty use only. The directions and the HTML to learn how to create Canvas buttons, links, and pop-up boxes are included on the page.

How to Add Color to a Page in Canvas with a Border

The default black text on a white background—ubiquitous across many Canvas pages—offers clear benefits. It ensures maximum contrast, thereby promoting readability and supporting accessibility standards. However, introducing thoughtful variation in design can also be pedagogically valuable. Color and visual elements can enhance student engagement, signal instructor presence, and foster a more personalized learning environment.

This page introduces using background colors effectively, offering guidance on incorporating visual interest and intentional design into your course content. Additionally, using borders can improve readability and draw attention to key elements. You can achieve a cohesive and professional appearance by experimenting with various color palettes and maintaining consistent color schemes. Here is a link to those needing a refresher on using the HTML view in the Rich Content Editor.

Code Directions:

The code starts and ends with a `<div>` element. The first background color, `#e5e8eb`, sets the overall color for the page. The second background color, `#3d4d51`, is for the border, while the third color, `#ffffff`, is used for the text. In this instance, the words displayed are "Giant Panda." Make sure to include the "#" symbol before each color code when entering it into your code.

For additional hex code inspiration, you can visit the website "Google Color Picker." It's essential to choose colors that are easy to read and meet accessibility standards, which can be checked using the Adobe Color Accessibility Tool. You can also modify the font size and style using the `span` style attribute. In the example provided, the font is set to the default style at a size of 24pt. Plus, you can modify the image in <img style>, and float the image to either the right or left side of the page. The example below floats the image to the right. Don't forget to add the alt tag, which specifies an alternate text for an image.

Apply the HTML:

<div style="background-color: #e5e8eb; padding: 25px;">
<h3 style="background-color: #3d4d51; color: #ffffff; padding: 25px; margin-bottom: 20px;"><span style="font-size: 24pt;">Giant Panda</span></h3>
<img id="6705773" style="float: right;" src="/courses/8610/files/6705773/preview" alt="Atlanta Zoo Panda" width="372" data-api-endpoint="https://lssc.instructure.com/api/v1/courses/8610/files/6705773" data-api-returntype="File" /><br />
<p>Type your information in here. </p>
<p>Use as many paragraphs as needed, too. If adding an image, include the image citation.</p>
<p><span style="font-size: 10pt;"><strong>Image Credit:</strong> "Giant Panda at the Atlanta Zoo." Flicki, 13 May 2008, originally posted to Flickr by popofatticus, https://www.flickr.com/photos/49503214348@N01/2478623520. Accessed 18 June 2025.</span></p>
</div>

Example:

Giant Panda

Nestled high in the dense bamboo forests of the misty, rainy mountains of southwestern China lives one of the world's rarest mammals: the giant panda. Currently, approximately 1,500 of these distinctive black-and-white bears remain in the wild. Pandas primarily consume bamboo shoots and leaves, which make up 99 percent of their diet. Although they occasionally eat other vegetation, fish, or small mammals, bamboo is their primary food source.

To maintain their health, pandas must eat large quantities of bamboo, foraging for about 12 hours daily. They must consume around 15 percent of their body weight during this time, as they only digest approximately one-fifth of what they eat. This low nutritional value requires them to eat at a rapid pace.

Pandas have broad, flat molars that help them crush bamboo shoots, leaves, and stems. They can chomp on bamboo that is up to one-and-a-half inches thick. Using their front paws with enlarged wrist bones that function like thumbs, pandas hold the bamboo stems to bring them to their mouths. A panda needs access to at least two bamboo species in its habitat; otherwise, it risks starvation. This scarcity of bamboo poses a significant threat to the already limited panda population.

Image Credit: "Giant Panda at the Atlanta Zoo." Flicki, 13 May 2008, originally posted to Flickr by popofatticus, https://www.flickr.com/photos/49503214348@N01/2478623520. Accessed 18 June 2025.