Many learning designers use inline styling to format content in pages and description areas in Canvas, but this is a very time-consuming process, and you simply can’t do as much with inline styling as you can with CSS. Fortunately, you can upload a CSS file to Canvas to customize the look of your courses.
In designing my own CSS for Canvas, I ran into several limitations that I’ll outline here for you. Hopefully, knowing them in advance will save you time!
Limitations
First, it’s good to know that a CSS file has to be uploaded to a subaccount in Canvas, so you can’t run it in just one course or a page in a course. Canvas then basically loads the file into all courses within that subaccount—you don’t have access to an individual page’s header or footer to add or edit what CSS files are being loaded. All of this (of course!) means that you’ll need access to Themes settings within the Admin panel to upload your CSS file.
Second, Canvas is going to display a lot of warnings about adding custom CSS, and for good reason: Your styling affects not only content you’re adding to a course but also your Canvas instance’s interface elements. You’ll want to be very cautious about the names for classes and ids that you use, as you may accidentally repeat some names already being used in Canvas’s own CSS, and changes you make to headings and lists have the potential to really skew the styling of dashboard items and menus. (See my workaround in the next section to avoid this issue.)
Third, you’ll have to create a separate CSS file for the Canvas mobile app and upload it in your Themes settings. Otherwise, none of your custom styling will appear in courses when students view them within the app.
Last but not least, Canvas will straight out block certain code: any fonts except for web-safe ones and HTML forms. Sadly, this means you can’t use your own custom fonts or Google fonts, nor can icon fonts, like Google Material icons or Font Awesome, be loaded into Canvas.
Through lots of trial and error, I’ve come up with a workaround to a couple of these limitations, and I also have a few recommendations if (like me) you’re writing CSS that other learning designers and faculty will be using.
Workarounds
At my current institution (Miami University Ohio) and my former one (Notre Dame), my CSS is being used by lots of other people. Pretty quickly, I realized that I needed to make my CSS more difficult to “break” by someone who’s editing content on a page; otherwise, I got bombarded with requests for help and spent a lot of time picking through HTML code to fix issues.
To style basic elements, wrap an entire page in a special div class.
One practice I highly recommend is creating a special class that you’ll use to style all of the elements of a page. Then, wrap an entire page’s HTML code within a div with this class. This will prevent any heading or list styling from affecting Canvas’s interface elements, and it will likely require less HTML code editing for anyone creating pages that use your styling. It’s also just plain harder to mess up.
Also, if like me you have some departments that have multiple programs under one Canvas subaccount or you just want to vary styling between a subaccount’s courses, using a special class to apply styling to an entire page will allow for this type of variation.
Save icon images in a central location.
Because Canvas won’t allow you to load icon fonts, my icons are images. For example, here I’ve created icons for assignment categories that were designed in collaboration with Miami University’s Special Education faculty. These icons are simply images that are added to the page and styled by a class in my CSS.
Consider that icon images should be stored in a central location, i.e., the backend of a website (like a WordPress site’s media library, which is what I currently use). Otherwise, issues arise when image files are loaded into a course because faculty will sometimes just try to copy the page’s content, then paste it into another course. The code for the image file won’t work outside of the course to which it has been uploaded.
Also, centrally stored icons make it easier to create templates pages that can just be copied and pasted as code. I have several set up in CodePen so that the code is easier to access—no copying or importing from one Canvas course to another required!
CSS Flexbox is the best option for creating columns.
When I first wrote CSS for Canvas, I made some fairly complicated layouts for images and text, but a lot of folks really struggle with sizing images for responsive design, or they want to include too much/too little text for a layout to work right. I’ve found that it’s better to keep things as simple as possible—you just can’t count on people showing up with specific amounts or types of content.
This means that CSS Flexbox is your best option for laying out content in rows and columns. It doesn’t look as “ragged” as CSS grid if you have differing amounts of text to add to columns. It’s also just easier to code—but beware of not including a closing div tag for a column or row. This seems to be a common coding error!
Also, I provide explicit dimensions for images when they’re used as backgrounds (like a hero header or gallery-style menu) so they’re not enlarged and pixelated on wider screens.
Elements
You can copy this HTML and CSS code to add styling to your own courses.
