Style guide

This page serves two purposes:

It demonstrates some of the CSS used on my website.
It contains an abbreviated HTML element reference that I have copied (with gratitude) from Eric Bailey’s Accessible HTML Content Patterns project.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. This is a link in the middle of a paragraph with particularly lengthy link text to demonstrate link behavior when wrapping lines. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Heading 4

Heading 5

Heading 6

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

List Item
List Item
List Item
List Item

The a element and external a element examples

The abbr element and an abbr element with title examples

The example

The code element example

The em element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

HTML

<ol>
  <li>List Item 1</li>
  <li>List Item 2
    <ol>
      <li>List Item 2.1</li>
      <li>List Item 2.2</li>
    </ol>
  </li>
</ol>

CSS

.sr:not(:focus-within, :active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

JavaScript

document.body.classList.remove('no-js');

Ordered list

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
  1. List Item 3.2.1
  2. List Item 3.2.2
3. List Item 3.3
List Item 4

Unordered List

List Item
List Item
List Item
- List Item
- List Item
  - List Item
  - List Item
- List Item
List Item

Definition List

Definition Term 1: Definition Description 1
Definition Term 2: Definition Description 2

Table

Academy Awards for Best Picture Descriptions of the film title, production company(s), and producers for the years 1980-1989.
Film	Year	Production Company(s)	Producer(s)
Ordinary People	1980	Paramount	Ronald L. Schwary
Chariots of Fire	1981	Enigma Film Productions	David Puttnam
Gandhi	1982	Columbia	Richard Attenborough
Terms of Endearment	1983	Paramount	James L. Brooks
Amadeus	1984	Orion	Saul Zaentz
Out of Africa	1985	Universal, Mirage Enterprises	Sydney Pollack
Platoon	1986	Orion, Hemdale	Arnold Kopelson
The Last Emperor	1987	Recorded Picture Company, Yanco Films, TAO Films, AAA, Soprofilms	Jeremy Thomas
Rain Man	1988	United Artists	Mark Johnson
Driving Miss Daisy	1989	Warner Bros.	Richard D. Zanuck, Lili Fini Zanuck
For the first six ceremonies, the eligibility period spanned two calendar years.

Emoji

😺
🎩
⛄️
🍺
🍑

Details

What payment options do you accept?

We accept cash, Visa, American Express, money orders, and personal checks.

Inline SVG

Crab by Hea Poh Lin from the Noun Project

Forms

Text Input Text Text with Placeholder Email Password URL Telephone Number Search Date Datetime-local Month Time Week Datalist Textarea

Non-text Input Color File Input Range Input

Select Select Select with Optgroup Multiple Select

Buttons Text Button

Output Output 350 degrees