Light Mode
Dark Mode

Color Defaults

color, background-color, accent-color, color-scheme
System Colors (browser defaults)
Canvas
CanvasText
Link
VisitedText
ActiveText
ButtonFace
ButtonText
ButtonBorder
Field
FieldText
Highlight
HighlightText
SelectedItem
SelectedItemText
Mark
MarkText
GrayText
AccentColor
AccentColorText
Default Element Colors

Default text color (inherited)

Link color (default blue)
Visited link color
Mark/highlight background

Color Defaults

color, background-color, accent-color, color-scheme
System Colors (browser defaults)
Canvas
CanvasText
Link
VisitedText
ActiveText
ButtonFace
ButtonText
ButtonBorder
Field
FieldText
Highlight
HighlightText
SelectedItem
SelectedItemText
Mark
MarkText
GrayText
AccentColor
AccentColorText
Default Element Colors

Default text color (inherited)

Link color (default blue)
Visited link color
Mark/highlight background

Typography

font-family, font-size, font-weight, line-height
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraphs

This is a standard paragraph. The quick brown fox jumps over the lazy dog.

Second paragraph to show margin-block spacing.

Inline Elements

strong | b | em | i | u | s | del | ins | mark | small | subscript | supersup | code | kbd | samp | var | abbr | cite | dfn | q

Blockquote
This is a blockquote with default margin/padding. - Citation
Pre/Code 
Preformatted text
  preserves spacing
function example() {
  return 'code block';
}
Address
123 Main Street
test@example.com

Typography

font-family, font-size, font-weight, line-height
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraphs

This is a standard paragraph. The quick brown fox jumps over the lazy dog.

Second paragraph to show margin-block spacing.

Inline Elements

strong | b | em | i | u | s | del | ins | mark | small | subscript | supersup | code | kbd | samp | var | abbr | cite | dfn | q

Blockquote
This is a blockquote with default margin/padding. - Citation
Pre/Code 
Preformatted text
  preserves spacing
function example() {
  return 'code block';
}
Address
123 Main Street
test@example.com

Form Controls: Text Inputs

appearance, border, padding, cursor
Text Input Types
Date/Time Inputs
Textarea

Form Controls: Text Inputs

appearance, border, padding, cursor
Text Input Types
Date/Time Inputs
Textarea

Form Controls: Selection

accent-color, appearance
Checkbox
Radio
Range, Progress, Meter
70%
60%
Color & File
Select
Fieldset & Legend
Legend

Form Controls: Selection

accent-color, appearance
Checkbox
Radio
Range, Progress, Meter
70%
60%
Color & File
Select
Fieldset & Legend
Legend

Form States

:disabled, :readonly, :required, :invalid, :focus
Input States
Output Result: 42

Form States

:disabled, :readonly, :required, :invalid, :focus
Input States
Output Result: 42

Interactive Elements

:hover, :focus, :active, cursor, outline
Links

Link | External Link

Buttons
Details & Summary
Click to expand

Hidden content revealed.

Already open

Visible by default.

Dialog (inline)

Open dialog element.

Interactive Elements

:hover, :focus, :active, cursor, outline
Links

Link | External Link

Buttons
Details & Summary
Click to expand

Hidden content revealed.

Already open

Visible by default.

Dialog (inline)

Open dialog element.

Tables

border-collapse, border-spacing, caption-side
Full Table Structure
Table Caption
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Footer 1 Footer 2 Footer 3

Tables

border-collapse, border-spacing, caption-side
Full Table Structure
Table Caption
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Footer 1 Footer 2 Footer 3

Lists

list-style-type, list-style-position, margin, padding
Unordered (nested)
  • Item 1
  • Item 2
    • Nested (circle)
      • Deep (square)
  • Item 3
Ordered (nested)
  1. First
  2. Second
    1. Nested
    2. Nested
  3. Third
Description List
Term 1
Definition 1
Term 2
Definition 2a
Definition 2b

Lists

list-style-type, list-style-position, margin, padding
Unordered (nested)
  • Item 1
  • Item 2
    • Nested (circle)
      • Deep (square)
  • Item 3
Ordered (nested)
  1. First
  2. Second
    1. Nested
    2. Nested
  3. Third
Description List
Term 1
Definition 1
Term 2
Definition 2a
Definition 2b

Semantic Sections

display: block (all default)
Block-level semantic elements
header
main
article
section
footer

Semantic Sections

display: block (all default)
Block-level semantic elements
header
main
article
section
footer

Media Elements

object-fit, object-position, aspect-ratio
Image Placeholder
Figure
Figure
Figcaption text
Audio & Video
Canvas & SVG Canvas
Iframe

Media Elements

object-fit, object-position, aspect-ratio
Image Placeholder
Figure
Figure
Figcaption text
Audio & Video
Canvas & SVG Canvas
Iframe

Display Defaults

display: inline | block | inline-block
Inline elements

span a strong em code

Block elements
div

p

Form controls (inline-block behavior)

Display Defaults

display: inline | block | inline-block
Inline elements

span a strong em code

Block elements
div

p

Form controls (inline-block behavior)

Miscellaneous

Various defaults
Horizontal Rule
Break Elements

Line 1
Line 2 (br)

WordBreakPoint (wbr)

Ruby (East Asian) Base (annotation)
Bidirectional

Right to Left

Miscellaneous

Various defaults
Horizontal Rule
Break Elements

Line 1
Line 2 (br)

WordBreakPoint (wbr)

Ruby (East Asian) Base (annotation)
Bidirectional

Right to Left