Style your TinyMCE or Markdown generated content with a single CSS class

wysiwyg.css file is a simple collection of styles targeted at HTML elements generated from a WYSIWYG editor (like TinyMCE) or Markdown.

Its purpose are:

As a matter of fact, wysiwyg.css supports themes.


This whole white block of content only uses a single CSS class on its container.
Everything inside are HTML elements with no additional class.

How it works

You just add the .wysiwyg CSS class to a container, and it will style all its child elements:

<div class="wysiwyg">
  <!-- Your generated HTML -->

In order to blend in gracefully with your design, the wysiwyg container will inherit colors (for text, headings and links) and typography (font family, size and smoothing).

What it styles


Inline elements

How it looks

The content you're reading is styled using wysiwyg.css with its default parameters.

You can have paragraphs, with links, important or emphasised words, code snippets, abbr, short quotes, citations, highlighted text, keyboard inputs, strikethrough, deleted and inserted elements, sample text, small text, and words withsubandsuptext.

You also have horizontal breaks.

You also have unordered lists:

And ordered lists:

  1. Step one
    1. Side step one
      1. Side step two
        1. Site step three
          1. Side step four
            1. Side step five
  2. Step two
  3. ????
  4. PROFIT!!!

And even definition lists:

You can also use the blockquote element. It can be used with or without paragraphs.

The figure and related figcaption elements are supported:

Web design in 4 minutes
A full width image
An awesome picture
A small image

Tables are supported: cells, rows, head, body, and foot are styled.

Name Instruments Period
Name Instruments Period
John Lennon Vocals, Guitar 1960–1969
Paul McCartney Vocals, Bass Guitar 1960–1970
George Harrison Guitar 1960–1970
Ringo Starr Drums 1962–1970


To provide flexibility, wysiwyg.css is written in Sass and comes with a list of variables and options.


Name Default value
$blue #2478ff
$pink #ff2450
$purple #9524ff
$grey-light hsl(0, 0%, 50%)
$grey hsl(0, 0%, 20%)
$grey-dark hsl(0, 0%, 10%)
$background hsl(0, 0%, 95%)
$border hsl(0, 0%, 90%)
$text $grey
$text-code $pink
$text-strong $grey-dark
$text-light $grey-light
$text-headings $grey-dark
$text-blockquote $grey-light
$link $blue
$link-hover $blue
$link-visited $purple
$background-code $background
$background-ins lime
$background-mark yellow
$table-background hsl(0, 0%, 100%)
$table-background-even hsl(0, 0%, 98%)
$table-background-hover hsl(0, 0%, 96%)
$table-border $border
$table-thead $grey-dark
$line-height 1.6
$margin 1.4em
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
"Inconsolata", "Consolas", "Monaco", monospace
$weight-strong 700
$weight-headings 700


By default, all options are set to false.

Option If set to true

Brings lists closer to the paragraph they immediately follow


Applies the color variables to the content:

  • $text
  • $link
  • $text-strong
  • $text-headings
  • $text-blockquote
  • $text-code
  • $text-light
  • $table-thead

Applies the font-family variables to the content:

  • $family-wysiwyg
  • $family-code

Applies font smoothing to non-code content


Adds bottom borders to h1 and h2


Underlines links


Adds striped rows to tables


Applies the $link-visited color to visited links

Fork me on GitHub