Below is most everything we’ll need to style our theme (check the source code to see all the embedded elements).

Heading 2

We’ll start with headings, levels 1–6. Articles have only one H1, the title above. This heading is H2. H2s and H3s are group paragraphs into sections. Usually, the spacing above the heading is greater than it is below, so the heading is closer to its section.

Heading 3

HTML standards require an H2 be followed only by an H3 or another H2 — don’t skip a level. This gives the document proper outline structure (and a11y).

Heading 4

Heading-level 4-6 are rarely used.

Heading 5

Heading 6

Text styles

This text has strong emphasis compared to this with regular emphasis. Emphasis can be different than bold and italic text, or a cite, as in A Magazine Name.

Let’s not forget to style subscripts, like H₂O, and the superscripts in E = MC² or an endnote.¹

We should check that an abbreviation, like HTML, has styling (maybe with a “?” cursor on hover). We may want to define what code looks like <var>with a variable</var>. We may use one style for deleted text and another for insertions. And here’s some big text next to some text in a small tag.

We should determine the characters-per-line of our paragraphs: a CPL of 50-90 is considered optimum. It’s wise to decide on the spacing between lines, usually a 1.25–1.5 multiple of font-size.

The above are two-line paragraph breaks.
This is after a single line break. And below is a heading rule.

List types

Unordered list

• List items are usually indented.
• And start a list-style character, like a disc.
  • Nested lists are often further indented.
  • With a different list-style, like an open circle.
    • And here’s a second-level of nested list.
    • With a different list-style, like a square.
    • Decide on the vertical spacing between list items.
  • Check vertical spacing between list items.
• And check vertical spacing between nested lists.

Ordered list

1. The ordered list might also be indented.
2. And have a number as its list-style.
   1. With more indention for a nested list.
   2. And a different numbering style (e.g., letters or roman).
      1. We’ll likely never need a deeper nested ordered list.
      2. But if we ever do, it should have some style.
3. Again, specify margins and spacings.

Definition list

Definition List Title

This is a definition list division.

Definition

An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Blockquotes

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you. — HAL 9000

Links (and their states)

Tables

Tables w/ “tabular” class

Table (without class)

More HTML tags

Form elements

Test and textarea

Checkboxes

Radio buttons

Select menus

Form control buttons

Preformatted Text

"Beware the Jabberwock, my son!
    The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
    The frumious Bandersnatch!"

Code

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}

Text, one more time