cancel
Showing results for 
Search instead for 
Did you mean: 
Community Member

Embed CSS in Canvas page?

I use a fair amount of inline CSS to visually format the materials for my courses. One frustration I have is that I cannot use external or embedded styles to do this more efficiently: I have to micro style every instance of some content so that it is formatted correctly. This is not just a matter of formal preference, but rather it is to help students with some of the information that I need to share with them. I teach web technology, and this becomes an issue of usability.

For instance, I have some cheat sheets of common HTML and CSS validation errors, and in D2L, my former learning management system, I could easily use embedded styles so that these cheat sheets looked exactly like the HTML and CSS validation error pages that students would encounter when validating their work. In Canvas, the cheat sheets are much less helpful because the visual formatting doesn't work. I have attached screen shots:

D2L

html validation cheat sheet

Canvas:

canvas bad formatting

I would like to be able to use an embedded style so that the 10 or 15 errors (on each of the HTML and CSS cheat sheets) are formatted in a comprehensible way. It would take a great deal of time to actually write inline styles for this, and it isn't reasonable to expect it. PDF or image versions of this document are far less usable and accessible, which is something Canvas seems to want to promote!

Is it possible to allow an embedded style sheet in a Canvas page? I have tried and have not been successful.

Tags (2)
15 Replies
Adventurer II

Since you're a web professional... I wonder if your institution would allow you to manage some of these for yourself/sub account using Canvas Themes, How do I upload custom JavaScript and CSS files to an account? I use this to set the styles for some of our designs and HTML elements. If you don't have access to Sub Account Themes, then inline CSS or the above [mailer] solution looks best. This is why stefaniesanders‌ suggested voting on Allow Custom CSS in Editor, which is more about letting course designers/instructors add JS/CSS to their pages/course similar to Canvas Themes, but at an appropriate user level... not a CSS editor.

I'll contact my institution to see whether that access is available to me 🙂

Community Coach
Community Coach

Hi lmoline@uwm.edu...

Checking in with you because this topic hasn't had much activity since the middle of September.  Has this question been answered to your satisfaction?  If so, please feel free to mark one of the above responses as "Correct".  Or, if you're still needing some assistance, please post a note below letting Community members know how we can help you out.  I'm going to mark your question as "Assumed Answered" (How we keep your questions flowing!‌), but that won't prevent you or others from posting additional questions/comments below related to this topic.  Hoping to hear back from you soon...thanks!

I ended up using the pre-flight mailer suggestion above, and it worked well for this situation. However, I would still like to be able to format things more efficiently with external or embedded styles, which it seems Canvas just isn't interested in making available. My experience with Canvas as both I and students make the transition from another platform is that we struggle with the UNIFORMITY of everything. I go out of my way to format things so that there is stronger visual hierarchy and contrast. It is just a lot of work.

Lisa,

I've given up on making people understand what you mean here.

I agree with you but likely the editor technology they are using is not in-house so something like this will take somebody with clout and customer focus to fix.

In the meantime I use an inline solution here too.  Just for nice sytnax highlighting of code for my students.

Working Around Canvas LMS HTML Limitations 

Community Member

In case anyone here is interested in how I solved this to get CSS styles into Canvas content, I made a post about it. Working Around Canvas LMS HTML Limitations .  Essentially use a style inliner and patch images.

Hope this helps - I would not hold my breath for Canvas to improve their editor/renderer to allow inline styles because it's likely not an inhouse product.