Style Guide

Heading Level 1

This is a paragraph under an H1 heading. It demonstrates the default paragraph styling and margin behavior.

Heading Level 2

This is a paragraph under an H2 heading. Subsections generally use H2s.

Heading Level 3

Paragraph under H3 heading, showing further hierarchy levels.

Heading Level 4

Paragraph under H4 heading, usually for smaller sections or callouts.

Heading Level 5

Paragraph under H5 heading, getting into minor titles or captions.

Heading Level 6

Paragraph under H6 heading, typically for tiny headings.

Paragraph Elements

This is a strong word inside a paragraph.

This is an emphasized word inside a paragraph.

This is a small text element inside a paragraph.

Here is some text with a superscript and a subscript.

An HTML abbreviation example.

Blockquote

“This is a blockquote. It’s used to indicate the quotation of a large section of text from another source.”

Lists

Unordered List

  • First unordered list item
  • Second unordered list item
    • Nested unordered item
  • Third unordered list item

Ordered List

  1. First ordered list item
  2. Second ordered list item
    1. Nested ordered item
  3. Third ordered list item

Definition List

HTML
A markup language for creating webpages.
CSS
A style sheet language for describing the presentation of a document.

Code Examples

Inline code example: <div>Hello World</div>

Preformatted Text

function greet() {
    console.log("Hello, World!");
}

Table Example

Sample Table
Header One Header Two Header Three
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3
Footer Text

Form Elements

Form Example

















Buttons



Link Styled as Button

Address Element

Written by John Doe
Visit us at:
Example.com
123 Main Street, Anytown, USA