Inline Styling

Skip to page content

Inline Styling

The most common problem encountered by remediation teams (those tasked with ensuring courses are accessible for all learners) is the inclusion of "inline styles."

Inline styling change the way content visually appears by applying styles directly in the page's HTML.  This occurs when a person adding content:

  1. Manually changes font types, font sizes, colors,  or styles such as bold, italics, or underlining.
  2. Copies content from an external source and inadvertently pastes content with its own styling rules into edX.  

Regardless of how it gets there, inline styling can diminish the consistency advantages of a page’s built-in style sheet and may cause accessibility issues for low-vision users dependent on zooming text in order to access content.  This is because most inline styling often controls the fixed width and height of fonts. 

WCAG 2.0 Guidelines 1.4.4 AA  Links to an external site.and 1.4.1 A Links to an external site.

Overview

Although inline styles may visually appear to add semantic structure to a pages content, it does not do so meaningfully for those using assistive technologies (such as a screen reader).  Being conscious of inline styling allows content creators to start with a fresh slate so the semantic structure added is both meaningful and utilitarian.

Best Practices

  • Use inline styling sparingly, if at all. 
  • Ways to avoid inline styling:
    1. When copying content from a word processor or website, remove all inline styling artifacts before pasting into Canvas. This can be done by first pasting the desired content into text editors such as TextEdit, BBEdit Links to an external site. or Sublime Text Links to an external site.. Once the target content is loaded in the text editor, select all, copy and paste into Canvas.
    2. When pasting content into Canvas, right click and choose, “Paste Special>Unformatted Text."

Removing Inline Styling

Example of Inline Styling Removal

This is a sentence with inline styling.

Note how the sentence above doesn't look like the default Canvas font. This is because it was copied into Canvas with inline styling. The snippet of HTML code for the sentence is given below.

<p><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial Black',sans-serif; mso-fareast-font-family: 'Adobe Fan Heiti Std B'; mso-bidi-font-family: Aharoni;">This is a sentence with inline styling.</span></p>

The inline styling can be removed manually be removing all the <span> and <style> attributes, or by copying the text into a text editor. Once inline styling is removed, the resulting HTML Code is vastly simplified:

<p>This is a sentence without inline styling.</p>

Note how the code doesn't have any "style" or "class" attributes.

Online Tools for Removing Inline Styling

The following websites offer assistance in removing inline styling from HTML Code. Try cutting the inline styling from the first example above and pasting into one of the below tools.

Reading Check

Use the discussion button below to start or view discussions related to this workshop.

Reading Check