Hacking the LMS
: 
Using HTML + CSS to Create Better Courses

Why learn HTML and CSS?

  • Make content more accessible
  • Make content more transferable
  • Work confidently in any platform
  • Identify the cause of formatting frustrations
  • Improve the way things look

Some Basic Vocab

HTML is structure. CSS is style.

opening tag<h1>Heading 1 elementclosing tag</h1>
<p style=inline CSS"color: red;">Paragraph element</p>
Heading 1 element
Paragraph element

Page Structure

Problematic Page Structure

See the Pen Page Structure (1) – Bad Page Structure by Amy Spielmaker (@akspiel) on CodePen.

Fixed Page Structure

See the Pen Correct Page Structure by Amy Spielmaker (@akspiel) on CodePen.

Page Visual Design

Design is not decoration. Design is communication. Design is CSS.

Module page in an LMS with section headings but no longer and lacking differentiation in text size.
Page without design.
There's not much to help guide us through this content.
Module page in an LMS with section headings that have borders, colors, and icons. There's more whitespace and visual hierarchy.
Page with design.
Strong visual hierarchy helps us quickly parse the information.

Page Design With Strong Visual Hierarchy

See the Pen Page Design With Strong Visual Hierarchy by Amy Spielmaker (@akspiel) on CodePen.

Some Additional Vocab

HTML + inline CSS

HTML
<h2 style="border-bottom: 2px solid;">Heading with border</h2>
<p>Paragraph with <a href="#" style="text-decoration: underline;">link</a>
Heading with border
Paragraph with link

HTML + non-inline CSS

HTML
<h2 class="border-heading">Heading with border</h2>
<p>Paragraph with <a href="#">link</a>
CSS
.border-heading {
border-bottom: 2px solid;
}
a {
text-decoration: underline;
}
Heading with border
Paragraph with link

Using Your LMS’s Styles

How do you find your LMS’s styles?

Answer: Use your browser's DevTools:
Right-click Inspect

If You Have the Power

If you have the power to add external CSS, you should

You should also have sufficiently advanced CSS skills and a commitment to code maintenance.

With external CSS, you can:

  • Define styles for specific screen sizes (e.g., mobile)
  • Define styles for specific states (e.g., hover)
  • Control the appearance of elements outside the content editor
  • Ensure your styles are applied (some LMSs remove certain inline styles)
  • Quickly make styles consistent across pages

Do you have the power?

What's possible
LMS Your Style Powers Conditions / Limitations
Canvas
  • Inline CSS Yes
  • External CSS No
 Several inline CSS properties are stripped
Canvas with DesignPLUS
  • Inline CSS Yes
  • External CSS Yes
 Only possible on pages where you can use design tools
Moodle
  • Inline CSS Yes
  • External CSS Yes
 You have to use the plain text editor or the legacy TinyMCE HTML editor
Brightspace
  • Inline CSS Yes
  • External CSS Yes(ish)
 Several inline CSS properties are stripped; external CSS only possible on pages (“files”)

LMS Admin?

You can edit global themes and templates. Make better defaults. Fix accessibility issues. Small changes can make a big difference. Example basic CSS additions for Moodle

Keep learning!