Style Test Page

Comprehensive element showcase for CSS extraction

Heading Level 1

This is a paragraph with bold text, italic text, and bold italic text. We also have inline code and regular links as well as external links.

Heading Level 2

Here’s a paragraph with a footnote¹ and some math: \(E = mc^2\) inline and display math:

\[ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} \]

Heading Level 3

Unordered list: - First item - Second item with bold - Third item with code - Nested item 1 - Nested item 2 - Double nested - Fourth item

Heading Level 4

Ordered list: 1. First numbered item 2. Second numbered item a. Sub-item with letter b. Another sub-item 3. Third numbered item

Heading Level 5

Definition list: Term 1 : Definition for term 1

Term 2

Definition for term 2 with emphasis

Heading Level 6

This is the smallest heading level.

Block Elements

Blockquote

This is a blockquote with multiple paragraphs.

Here’s the second paragraph in the blockquote with bold and italic.

Nested blockquote

Code Blocks

# Python code block with syntax highlighting
def fibonacci(n):
    """Calculate Fibonacci number"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(f"Result: {fibonacci(10)}")

# R code block
library(ggplot2)
data <- data.frame(x = 1:10, y = rnorm(10))
ggplot(data, aes(x, y)) + 
  geom_point() + 
  theme_minimal()

Plain code block without language:

This is plain text
in a code block

Tables

Table 1: Table caption

Column 1	Column 2	Column 3
Cell 1	Cell 2	Cell 3
Bold	Italic	Code
Long content that might wrap	More content	End

Callouts

Note

This is a note callout with a title.

Warning

This is a warning callout with bold text.

Important

Critical information goes here.

Tip

Helpful tip with inline code.

Caution

Be careful with this.

Figures

Figure 1: Caption for figure

Divs and Spans

This is a custom div with class “custom-div”.

• Item in custom div
• Another item

This is text with a span element in the middle.

Interactive Elements

Tabset

Tab 1

Content for tab 1 with a list: - Item A - Item B

Tab 2

Content for tab 2 with code:

print("Tab 2")

Tab 3

Content for tab 3 with math: \(\sum_{i=1}^{n} i = \frac{n(n+1)}{2}\)

Line Breaks and Horizontal Rules

Text before line break
Text after line break

---

Text after horizontal rule

Special Characters and Escaping

Special characters: & < > ” ’ © ® ™

Escaped characters: * _ [ ] ( ) # + - . !

Nested Combinations

1. List item with bold and italic and code > Blockquote inside list

   # Code block inside list
   print("nested")

2. Another item with math: \(x^2 + y^2 = z^2\)

Links and References

• Internal link
• External link
• Reference to Figure 1
• Reference to Table 1
• Citation style [@smith2020]

Footnotes

Raw HTML

This is raw HTML content with inline styles.

Click to expand

Hidden content that expands when clicked.

Keyboard Input

Press Ctrl + C to copy.

Abbreviations

HTML and CSS are important web technologies.

[HTML]: HyperText Markup Language [CSS]: Cascading Style Sheets

Task Lists

• Completed task
• Uncompleted task
• Another uncompleted task

Strikethrough

This is strikethrough text.

Highlighting

This is ==highlighted text== if supported.

Subscript and Superscript

H₂O is water. E=mc² is Einstein’s equation.

End of Test Page

This page contains all major elements that need styling.

Footnotes

1. This is the footnote content with formatting.