Canvas Content Styling Guide

While leading technical evaluations for enterprise LMS infrastructure at Imperial College London, Canvas was selected as the platform. Looking at how other institutions and resources like Medium approached Canvas styling, I noticed the same problems recurring: missing semantic tags, poor colour contrast, overuse of legacy elements that could break at any point, and layouts that fell apart on mobile.

I built a Canvas course to document best practices and give colleagues a reference they could copy from directly — HTML and CSS patterns that worked within Canvas's constraints, written for educators with no coding background. No framework knowledge required; every example is self-contained and copy-paste ready.

When I moved jobs, I extracted the content into a standalone documentation site so staff at other institutions could benefit from it. The move also made it possible to improve on what Canvas itself cannot provide: light/dark mode, syntax-highlighted code blocks with a copy button, and a filterable icon reference. The original Canvas course had the full icon set but no way to search it — the standalone site fixes that.