cancel
Showing results for 
Search instead for 
Did you mean: 
lmoline
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
Stefanie
Community Team
Community Team

Hi,  @lmoline ‌, you should be able to embed the "cheat sheets" in a Canvas page using an iframe. There are several resources here about this, and here's an example: Embedding an Uploaded HTML page in an iFrame 

lmoline
Community Member

I would never have considered an iframe to solve a CSS challenge. I'll take a look. iframes present interesting accessibility challenges: it would be much more accessible to allow embedded CSS in a canvas page than this workaround! I'll certainly try this, but would it not be worth considering allowing embedded CSS in a Canvas page? What are the reasons that it is forbidden? I read the linked discussion, and it involved all sorts of accessibility-problematic desires (image maps!)

 @lmoline ‌, if this is something you'd like to see added to the Canvas Rich Content Editor (RCE), please add your vote and comments to https://community.canvaslms.com/ideas/14174-allow-custom-css-in-editor 

lmoline
Community Member

I'm not really wanting a custom CSS editor. I'm wanting to be able to write efficient styles. Using a visual editor to do the formatting I want would be just as time consuming and frustrating as writing inline styles, which I have the skills to do, just not the time. I just want access to an embedded style sheet. 

lmoline
Community Member

I'm not sure that the accessibility problems that are introduced with the iframe are worth the trouble. I am confused that Canvas would prefer to introduce all the accessibility problems that are inherent in an iframe rather than just letting people use embedded styles; you blacklist problematic styles anyway, so the results of a self-styled Canvas page would be much preferable to the anything-goes styles in an iframe (not to mention all the problematic things that iframes introduce in terms of responsiveness, extra scrollbars, and content which is not accessible).

 @lmoline , I've shared your question with the Instructional Designers‌ group; perhaps the members there can suggest other solutions.

lmoline
Community Member

Thank you.

sgilbert
Surveyor II

Hi Lisa.

Here is what I've done that seems to work OK in certain situations. 

I write my page using normal CSS (a style sheet or embedded css) and then run it through Pre-flight mailer. This Canadian Web app was originally created to embed CSS in email for newsletters. It reads your page and turns your embedded and external style sheets into inline CSS.

Premailer: pre-flight for HTML email 

lmoline
Community Member

That is a very useful little utility! Other than a few little things that aren't worth bothering about, it did a very nice job with the styles.