This page is part of the blog post Extensive CSS Test Page. Please go there to read about this page.

CSS Test Page

The purpose of this HTML is to help test the default settings defined by the CSS using as many different HTML elements as possible.

Wikipedia has a nice overview of the most common HTML elements.

Testing: Headers

This section will test all six <heading> elements. Short headers will be tested as well as long ones that will take up several lines of text; this demonstrates how the line distance is handled.

Heading 1

This is a normal paragraph following the header.

Heading 1 — with several lines of text. 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.

This is a normal paragraph following the header.

Heading 2

This is a normal paragraph following the header.

Heading 2 — with several lines of text. 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.

This is a normal paragraph following the header.

Heading 3

This is a normal paragraph following the header.

Heading 3 — with several lines of text. 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.

This is a normal paragraph following the header.

Heading 4

This is a normal paragraph following the header.

Heading 4 — with several lines of text. 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

This is a normal paragraph following the header.

Heading 5

This is a normal paragraph following the header.

Heading 5 — with several lines of text. 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

This is a normal paragraph following the header.

Heading 6

This is a normal paragraph following the header.

Heading 6 — with several lines of text. 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

This is a normal paragraph following the header.

End of header tests.

Testing: Paragraphs / Text Manipulation

Links

This is a test link with a title, and this is a test link without.

Manipulation

In the lines with common tags below, the <sup> and <sub> tags may affect line distance depending on the web browser.

<em>       The latin words ab ovo usque ad mala means from beginning to end.
<i>        The latin words ab ovo usque ad mala means from beginning to end.
<b>        The latin words ab ovo usque ad mala means from beginning to end.
<strong>   The latin words ab ovo usque ad mala means from beginning to end.
<sup>      The latin words ab ovo usque ad mala means from beginning to end.
<sub>      The latin words ab ovo usque ad mala means from beginning to end.
<cite>     The latin words ab ovo usque ad mala means from beginning to end.
<code>     The latin words ab ovo usque ad mala means from beginning to end.
<samp>     The latin words ab ovo usque ad mala means from beginning to end.
<tt>       The latin words ab ovo usque ad mala means from beginning to end.
<big>      The latin words ab ovo usque ad mala means from beginning to end.
<small>    The latin words ab ovo usque ad mala means from beginning to end.
<del>      The latin words ab ovo usque ad mala means from beginning to end.
<ins>      The latin words ab ovo usque ad mala means from beginning to end.
<abbr>     The letters NBA is an abbreviation (hover on it to see what it means).
<acronym>  The letters NBA is an acronym (hover on it to see what it means).

The following paragraphs uses a mix of the above elements. The 250x125 image of the city is floated right.

CityLorem ipsum dolor sit amet, adipiscing 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. The word NBA is an abbreviation. 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

This entire paragraph is written with small text only. 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. The word NBA is an abbreviation. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. 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.

This entire paragraph is written with big text only. 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. The word NBA is an abbreviation. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.

Block Elements

Elements other than <p> that affects large areas of text is tested here.

This sentence is wrapped in a <blockquote> element and is commonly used when quoting someone else in a blog. 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.

The following block of text is wrapped in a <pre> element and can be used to show a chunk of code as an example:

lda #$01
sta #$d020

This is a very long line to test that the definition for this element can handle it. By default the element will show just one line, thereby creating a horizontal scroll bar. 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.

lda #$01
sta #$d020

The following is wrapped in an <address> element:

John Smith
Box 1234
Disneyland

End of paragraph tests.

Testing: Images

An image with <alt> element only:

Icy Landscape

Same as the above, but also with a link:

Icy Landscape

An image with <title> and <alt> elements:

Icy Landscape

Same as the above, but also with a link:

Icy Landscape

Paragraph with an inline image:

This is a star Star image.

Paragraph with an inline image in a link:

This is a star Star image.

End of image tests.

Testing: List Types

Definition List

Definition List Title 1
This is a definition list division 1.
Definition List Title 2
This is a definition list division 2.
Definition List Title 3
This is a definition list division 3.
Another Definition List Title
This is a definition list division with a long description. Lorem ipsum dolor sit amet, consectetuer 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Paragraph after the last definition list.

Ordered List

  1. List item 1 with a long description. Lorem ipsum dolor sit amet, consectetuer 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5
  6. List item 6
  7. List item 7
  8. List item 8
  9. List item 9
  10. List item 10 tests how the list works with more than one digit.

Unordered List

Ordered Nested List

  1. List item 1
  2. List item 2 with a long description. Lorem ipsum dolor sit amet, consectetuer 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
  3. List item 3
  4. List item 4

Unordered Nested List

End of list tests.

Testing: Form / Fieldset / Legend

This section will test a complete <form> with <fieldset> and <legend> tags inside it.

This text is located inside a <form> tag. Lorem ipsum dolor sit amet, consectetuer 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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Legend

This paragraph is located just below the <legend> tag. Tip: To make all labels appear above the controls, just add display: block in the CSS for the <label> tag.

Radio 1
Radio 2
Radio 3

Checkbox 1
Checkbox 2
Checkbox 3

End of form tests.

Testing: Tables

All tables here have <cellspacing> and <cellpadding> both set to 0.

This is a common table with just <tr>, <th>, and <td> in use:

Header 1Header 2Header 3Header 4Header 5
Division 1Division 2Division 3Division 4Division 5
Division 1Division 2Division 3Division 4Division 5
Division 1Division 2Division 3Division 4Division 5

The following table also uses <caption>, <thead>, <tfoot>, and <tbody> elements:

Table Caption
Header 1Header 2Header 3Header 4Header 5
Table Footer
Division 1Division 2Division 3Division 4Division 5
Division 1Division 2Division 3Division 4Division 5
Division 1Division 2Division 3Division 4Division 5
Division 1Division 2Division 3Division 4Division 5

End of table tests.

End of CSS Test.