Make Your Canvas Pages Look Great

A LITTLE HTML · A LOT OF AI

These support pages aren't magic — they're just HTML with inline styles. You can make your own course pages look this good in a few minutes, and you don't have to know how to code. Two small skills do it.

1 · The one button: HTML view

Editing any Canvas page, look at the bottom-right of the editor for the </> icon (“HTML Editor”). Click it, and you're looking at the raw HTML — that's where you paste. Click it again to see it rendered. That's the whole trick: paste HTML there, toggle back, done.

2 · Let AI write the HTML for you

Ask Claude, Copilot, or ChatGPT. Give it three things: what you want, the RJ look, and the format (a single paste-ready block). Copy this prompt, fill in the brackets, and paste the result into the HTML view above:

Write a Regis Jesuit Canvas page as ONE block of HTML using inline styles only (no <style> or <script> tags; use tables for any columns). House style: font Helvetica Neue/Arial; accent red #C11430; dark charcoal header #2a2a2a; light cream cards #fafafa; warm highlight #fff7d6. Layout: a dark title bar, a thin red rule under it, cards with a colored top border, and a dark footer. The page is about: [YOUR TOPIC]. Include these sections: [LIST WHAT YOU WANT]. Give me only the HTML, ready to paste into Canvas's HTML editor.

Don't love the first result? Tell it what to change (“make the cards three across,” “add a warning box,” “shorter”) and paste again. This is exactly how these pages were built.

3 · Or start from this template

Copy this, paste it into the HTML view, and change the words. It's already in RJ colors.

<div style="font-family:'Helvetica Neue',Arial,sans-serif; color:#1a1a1a; line-height:1.5;">
  <div style="background:#2a2a2a; padding:16px 24px;">
    <div style="font-size:22px; color:#fff;"><strong>Your Page Title</strong></div>
    <div style="font-size:11px; color:#b8b8b8;">A SHORT SUBTITLE</div>
  </div>
  <div style="background:#C11430; height:6px;"></div>
  <div style="padding:24px;">
    <p style="font-size:15px; color:#444; line-height:1.7;">Your intro paragraph goes here. Say the one thing a reader needs first.</p>
  </div>
  <table style="width:100%; border-spacing:12px;"><tbody><tr>
    <td style="width:50%; background:#fafafa; border-top:4px solid #C11430; vertical-align:top; padding:16px;">
      <h3 style="margin:0 0 6px; font-size:16px;">First point</h3>
      <p style="margin:0; font-size:13px; color:#555;">A sentence or two of detail.</p>
    </td>
    <td style="width:50%; background:#fafafa; border-top:4px solid #C11430; vertical-align:top; padding:16px;">
      <h3 style="margin:0 0 6px; font-size:16px;">Second point</h3>
      <p style="margin:0; font-size:13px; color:#555;">A sentence or two of detail.</p>
    </td>
  </tr></tbody></table>
  <div style="background:#2a2a2a; color:#888; padding:14px 24px; font-size:11px; margin-top:12px;">Your Name &middot; Regis Jesuit High School</div>
</div>

Rules that keep it working in Canvas

Inline styles only. Canvas strips <style> and <script> tags — put the styling right on each element (as the template does). Ask AI for “inline styles only.”	Use tables for columns. Side-by-side cards are most reliable as table cells. And don't set a max-width — let the page fill the space.
Check it in Student View. See it the way students will before you publish.	Keep it simple. A hero, a few cards, a footer goes a long way. Stuck? Open a HelpDesk ticket or message me.

Jason Beyer

Educational Technology · Regis Jesuit High School · A.M.D.G.

LAST VERIFIED · AUGUST 2026

HelpDesk ticket · helpdesk@regisjesuit.com · 303.269.8080