Style Guide

This is the style guide that I use for testing CSS. It's mostly based off of The Poor Man's Styleguide, but I made some small edits, so that it better fits my use case. Feel free to take inspiration for your own projects, or just look around if you really are that curious to know what every single (styled) element on my site looks like.

Colors

Default Background

Normal Text

Accent Text

Accent

Link

Visited Link

Selected Text

red orange yellow green blue purple

Accent Background

Normal Text

Accent Text

Accent

Link

Visited Link

Selected Text

red orange yellow green blue purple

Fancy Link

Callouts

Stop! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate repellendus est omnis, neque voluptatem suscipit saepe qui earum. Obcaecati soluta ad alias. Ipsum, nostrum inventore iusto impedit alias fuga quisquam! link.

Caution! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate repellendus est omnis, neque voluptatem suscipit saepe qui earum. Obcaecati soluta ad alias. Ipsum, nostrum inventore iusto impedit alias fuga quisquam! link.

Success! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate repellendus est omnis, neque voluptatem suscipit saepe qui earum. Obcaecati soluta ad alias. Ipsum, nostrum inventore iusto impedit alias fuga quisquam! link.

Just so you know... Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate repellendus est omnis, neque voluptatem suscipit saepe qui earum. Obcaecati soluta ad alias. Ipsum, nostrum inventore iusto impedit alias fuga quisquam! link.

This is a normal box. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate repellendus est omnis, neque voluptatem suscipit saepe qui earum. Obcaecati soluta ad alias. Ipsum, nostrum inventore iusto impedit alias fuga quisquam! link.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

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.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Images

Button Wall

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced."

—Aldous Huxley, Brave New World

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem dolore libero, non harum praesentium sint consequuntur quidem veritatis obcaecati. Accusantium praesentium libero maxime totam quod, deserunt aut sed placeat illo?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At debitis, eligendi veritatis molestiae amet nostrum, suscipit cumque, itaque dolore voluptate minima? Soluta ipsum maiores eos ab corporis a ipsa laborum?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quasi velit assumenda, delectus dolor eius ducimus reiciendis libero nostrum pariatur. Similique nihil laboriosam labore ad alias soluta dolore autem asperiores."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Figure and Figcaption

Small

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel, perspiciatis ducimus.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur ullam quisquam accusamus dolorum perspiciatis sit accusantium, impedit, saepe esse provident quas aspernatur nesciunt blanditiis aperiam laboriosam odit dolores minus temporibus.

Full-Size

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel, perspiciatis ducimus, libero non autem aliquid inventore deserunt debitis similique unde, quaerat totam quis ipsum necessitatibus nihil corporis beatae deleniti accusamus.

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Text Elements

The a element, external a element, and a element with title examples

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The data element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

List Types

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
List Item 5

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4
List Item 5

Definition List

Definition Term 1: Definition Description 1
Definition Term 2: Definition Description 2
Definition Term 3: Definition Description 3
Definition Term 4: Definition Description 4
Definition Term 5: Definition Description 5

Fun Bullets

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4
List Item 5

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4
List Item 5

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4
List Item 5

Tables

This is a table caption
Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
A row with a cell spanning all 3 columns
Table Footer 1	Table Footer 2	Table Footer 3

Table Caption
	Heading	Heading	Heading	Heading	Heading
Heading	Data	Data	Data	Data	Data
Heading	Data	Data	Data	Data	Data
Heading	Data	Data	Data	Data	Data
Heading	Data	Data	Data	Data	Data

Form Elements

The Fieldset:

Legend

The Form: