Typeset.css

A no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content.

Inline elements

Common user-generated content includes anchors, bold and italic text.

Also common phrase tags are <code>, strong and emphasis (much like bold and italic).

Additional inline styles

Block elements

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote

This is a <blockquote>.

If you use typeset with a WYSIWYG editor, which oftentimes use <blockquote> to indent content, add typeset-wysiwyg to the surrounding editor element to remove the left border and adjust the left margin accordingly:

This is a <blockquote> with the typeset-wysiwyg modifier class applied to the container.

Preformatted text

Text in a <pre> element
is displayed in a fixed-width
font, and it preserves
both   spaces   and
line breaks

Lists

Block-level elements use line-height: 1.5em; and margin-bottom: 1.5em; to stack vertical space, like this paragraph!

Unordered lists

Ordered lists

  1. Ordered list item 1
  2. Ordered list item 2
    1. Nested list item 2.1
    2. Nested list item 2.2
  3. Ordered list item 3

Definition list

Term
Description of an item in a definition list.

Tables

Table caption
Column One Column Two Column Three
Column 1 Column 2 Column 3
Column A Column B Column C

Figures

Placeholder image from placeholder.com
Placeholder image from placeholder.com