After this introductory module, there is a Guidelines and Best Practices manual, and after that, each remaining manual will focus on a specific type of page element, such as boxes, images, or tables. Each of these manuals will include a brief overview of the topic, library code snippet pages, and a tutorial section that explains the code elements and how to create your own styles.

The library code snippet section of each manual contains styles we recommend (with noted caveats in a few instances). For every style we will provide an example of what it looks like on the page as well as the code in a show/hide for you to copy and paste into your course, as seen in the following example.

To use the code in your own course, follow these steps:

1. Copy the code provided.
2. Go to the page of the Canvas course you wish to modify.
3. Select the Edit button, and then select the HTML editor (the </> button beneath the RCE window).
4. Paste the code and make any desired modifications.
    

In many instances, the code we provide can be customized to suit your needs. For example, you may want a box with a slightly different border thickness or color than the ones provided in this resource. To help you pinpoint which areas of the code can be modified, we provide a modifications section at the bottom of each library page to call out some of these customizable portions of the code.

While the primary purpose of this resource is to share responsive and accessible styles that can be used in Canvas, we recognize that some people may want to learn more about how to use and modify these styles and related code. For this reason, we have included a tutorial section at the end of each module that will provide a deeper look at the code with some additional context and explanation of how to create and edit the types of styles we feature in this resource.