Global CSS Test Page

This page includes a wide set of HTML elements so you can build and verify global styles:
typography, forms, tables, and more.

Typography

Headings

Heading 1 (inside article)

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Strong, emphasis, bold (b), italic (i),
underline, strikethrough, mark,
small text, HTML,
inline quote,
Citation,
definition,
Ctrl + S,
inline code,
sample output,
x2,
H2O,
.

A link: Example.com.
A visited link will show once you click it.

Text with a span, a
line break, and a
possiblewordbreak.

Blockquote text: “Design is not just what it looks like and feels like. Design is how it works.”

— Someone
// Preformatted block
function hello(name) {
  return `Hello, ${name}!`;
}
Address element
123 Example St.
Sofia, BG

Figure

Placeholder
Figure caption for an image.

Lists

Unordered list

  • List item one
  • List item two with a link
  • Nested list:

    • Nested item A
    • Nested item B

Ordered list

  1. First
  2. Second
  3. Third

Description list

Term
Description of the term.
Another term
Another description.

Media

Responsive picture

Responsive placeholder

Audio

Video

Inline SVG

SVG

Canvas

Canvas fallback text.

Forms

Contact


























45%


65






Tables

Example table caption
Name Role Status Notes
Alice Admin Active Has full access
Bob Editor Pending Awaiting approval
Charlie Viewer Disabled Request re-enable
Table footer content

Interactive elements

Details / Summary

This is expandable content inside the details element.


Dialog (open)

This is a dialog element. Style it like a modal.



This is a popover (newer HTML feature).

Inserted text and deleted text.

Semantic layout

Article with aside

Article title

This is an article block with some content. Use global spacing and typography rules
to make this look good.

Section footer content.