Format and Convention Style Guides



Format, Convention and Style Guides save time, and benefit your course materials with a consistent “Look and Feel.” This documentation system records how you use…

  • Navigation Structure
  • Colors
  • Font Styles, Sizes, Colors, Alignments
  • Abbreviations
  • Definitions
  • Everything Important


Create your Format, Convention and Style Guides as you begin, keep the files open, and add to the guides as you progress.

You will be amazed at how many configurations you collect in a week.

Burning Issue

Changes in the “Look and Feel” of your course from one section of module to another provides unconscious (and sometimes noticeable) irritation for your students.

Your students may not be able to say what is bothering them about your course, but something will “Just not Seem Right.”


The components can be…

  • A Text File
  • A Word Processing Document
  • A Spreadsheet
  • A Note Keeping Database
  • A Private, Searchable Blog
  • An HTML/ CSS Local Site
  • A Private Wiki

Use whatever you are most comfortable using.

The ideal is to make your guides searchable, perhaps by keeping the guides on a private Blog or Wiki.

Massive courses (and group developed courses) require formal Format, Convention and Style Guide Management. One person should be appointed to monitor and keep the system up-to-date.

Format, Convention and Style Guides are crucial if course development is a collaborative effort.

Why this is Important

Consistent formatting, style and “Look and Feel” give your courses a professional look.

These consistencies also make your course materials easier to read. Consistent design makes your materials predictable so students can skim, scan and review.

What it is…

Format, Convention and Style Guide

This is a map or blueprint describing how your course and course materials will look.

These Guides include…

  • Fonts (Styles and Sizes)
  • Colors and Color Codes
  • Margin Sizes
  • Image Formats and Standard Image Sizes
  • File Naming Conventions
  • Audio Formats
  • Video Formats
  • Theme and Template Customizations

How it Helps Students…

Provides consistent, predictable course content and materials makes course navigation and the review of course content easier for students.

How Format, Convention and Style Guides Save (Protect) your Time and Money

The Format, Convention and Style Guides eliminate searching through files (or the last module) to figure out how items and materials were formatted.

You may remember settings while you are developing the course, but forget later in the semester, subsequent semesters or subsequent years.

Why you should do it…

You should create and refer to a Format, Convention and Style Guides because this will save time.

You can refer to the Format, Convention and Style Guide rather than having to reverse engineer previous

Since Format, Convention and Style Guide is labor and time-intensive, recovering from a system crash becomes easier if you need to re-configure old backup materials.

When not to Use it…

There isn’t a time or situation where lots of time and effort goes into online course development, so use a Format, Convention and Style Guide for every project.

Make developing and maintaining a Format, Convention and Style Guide a habit.

But don’t bother with one-off tasks.

Goals/ Objectives

The goal for developing and using Format, Convention and Style Guides is to…

  • Save Time
  • Provide a Consistent “Look and Feel” in your Course and Related Materials
  • Make your Courses Look Professional
  • Keep your Course Materials Consistent so that Global Editors can Make Course-Wide Changes


Format, Convention and Style Guide strategy and format are identified.

Entries are kept current.

All components are documented.

Taking Action

Create files for your Format, Convention and Style Guides.

Fill in relevant data.

Ask someone to examine your Format, Convention and Style Guide and determine if anything should be added.

Tools/ What you need…

You will need the software that you select, and a way to back up your guides.


You can use the following software tools…

  • Text Editors
  • Word Processing Programs
  • Spreadsheet Programs
  • Note Keeping Databases
  • Private Blogs or CMS Software
  • HTML/ CSS Editors
  • Wikis

Consistent upkeep is more important than the type of software tool you employ.

Choose a system that you are comfortable using.

Strategies/ Tactics

Do an initial “Grab” of formats and styles by screen capture. Then document.

How to do it…

Pick a system and decide on a framework. This can be …

  • A Book Model – Table of Contents, Chapters
  • A Spreadsheet – Notes, Sheets within a WordBook
  • Mind Maps – With Links to Specific Files
  • A Database
  • A Private Blog
  • A Private Content Management System
  • A Private Wiki

Step #1

Decide on a suitable documentation repository.

Step #2

Choose an outline or framework.

Step #3

Set up files and links.

Step #4

Capture sample formatting.

Step #5

Document Cascading Style Sheets (CSS), comment codes for colors (or you won’t remember what codes go with what colors.

Step #6

Take inventory of the Formats, Styles and Conventions that you use.

Step #7

Rely on backups of themes, templates and boilerplates to decrease the need for documentation.

Format, Convention and Style Guide Example


Color Codes

  • Dark Cyan = #008B8B
  • Ivory = #FFFFF0
  • Navy = #fffff0>
  • Royal Blue = #4169E1
  • White = #ffffff

Emphasized Text

Font Color assigned by CSS Class

  • .blue – #0000FF
  • .green – #008000
  • .red – #FF0000
  • .white – #FFFFFF

Font Background Color (Highlighted Text) Assigned by CSS Class

  • .cyan – #00FFFF
  • .orange – #FFA500
  • .yellow – #FFFF00

Border Color – Mind Maps

  • R:9 G:24 B:53 –

Reference: Named Color Chart

W3 Schools Color Chart

Font Sizes

File Naming Conventions

  • All file names and URLS in Lower Case
  • Use Hyphens “-”
  • Never use Underscores “_”

Link Referring Text Naming Conventions

Narration Conventions

  • Use Blockquotes and Paragraphs Tags on Top Level WordPress pages
  • Use Unordered List on Second Lever WordPress pages
  • Notes: Use Parentheses and Colon (Note:…)


Format, Convention and Style Guice Outline…



Smashing Magazine’s Style and Branding Guide

Style Guide Icons from Smashing Magazine

Style Manual from SmashWiki

CSS Style Guides