A collection of classless CSS themes, each displayed on a page with common HTML elements.

By Trevor Lee

HTML elements from Jon Henshaw and Coywolf

Lists from dbohdan and swyx

Contribute to the repo

Default

List of elements


Blog Post Example

By Author Name -

"In Eregion long ago many Elven-rings were made, magic rings as you call them, and they were, of course, of various kinds: some more potent and some less. The lesser rings were only essays in the craft before it was full-grown, and to the Elven-smiths they were but trifles – yet still to my mind dangerous for mortals. But the Great Rings, the Rings of Power, they were perilous."

"A mortal, Frodo, who keeps one of the Great Rings, does not die, but he does not grow or obtain more life, he merely continues, until at last every minute is a weariness. And if he often uses the Ring to make himself invisible, he fades: he becomes in the end invisible permanently, and walks in the twilight under the eye of the Dark Power that rules the Rings."

Ian McKellen (left) as Gandalf and Elijah Wood as Frodo in The Lord
            of the Rings: The Fellowship of the Ring (2001).
Ian McKellen (left) as Gandalf and Elijah Wood as Frodo in The Lord of the Rings: The Fellowship of the Ring (2001).

"Yes, sooner or later – later, if he is strong or well-meaning to begin with, but neither strength nor good purpose will last – sooner or later the Dark Power will devour him."


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Forms

Radio

Select
Checkbox

Text Input

Dialog Box

This is an unstyled <dialog> box modal

Details

This is the summary for the <details> element. Click or tap to reveal its details.

These are the details for the summary, and an example of how HTML can be interactive without using CSS and JavaScript.

Audio

An MP3 using the <audio> element and the <controls> attribute.

Video

An MP4 using the <video> element and the <controls> attribute.

Ordered List

  1. item
  2. item
  3. item

Unordered List

Table

What an unstyled <table> looks like:

Heading Heading Heading Heading Heading Heading
Data Data Data Data Data Data
Data Data Data Data Data Data

Blockquote

This is a blockquote. The only thing a blockquote does is indent the text.

Strong and Emphasis

Sometimes you want your text to be strong and other times you want to put emphasis on it.

Description List

group 1
term
term
term
group 2
term
term
term

Preformatted Text

Preformatted text
  displays
    exactly
      how
        you
          save
            it in the HTML
        spaces, line breaks, and all

Mark

The <mark> element highlights text.

Progress Bar

32%

Meter

75% of tickets have been sold:

Abbreviations and Acronyms

SEO is an acronym for search engine optimization and ATTN is an abbreviation for attention, and both use the same <abbr> element.

Definition, Inline Quote, and Citation

A coywolf is an informal term for a canid hybrid descended from coyotes, eastern wolves, gray wolves and dogs.

The <dfn> element italizes the word or phrase being defined within the sentence or paragraph. The <q> element inserts quotation marks and should have a <cite> attribute that points to the page where the quote came from.

Superscript and Subscript

Sometimes you superscript⬆ and other times you need subscript⬇.

Sample Output from Computer

File not found. Press F1 to continue

Keyboard Input

Press Ctrl + C to copy text (Windows).

Press Cmd + C to copy text (Mac OS).

Small

Sometimes it's nice to comment about something on the side.