Art of the Smart

CSS Test Page


Categories: [coding]

A simple page for testing a simple CSS setups, includes all the usual suspects plus form and code snippets.

Heading One

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Two

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Three

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Four

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Five

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Six

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.


This is italic text, made with em. This is italic text as well, made with i.

This is bold text, made with strong. This is bold text as well, made with b.

This is underlined text, made with u. This is inserted text, made with ins.

This is deleted (strikethrough) text, made with strike. This is also strikethrough text, but made with s. This is deleted text, made with del.

This is computer code, made with code. This is teletype text, made with tt.

This is text the user is supposed to enter in, or keyboard, made with kbd. This is a variable, made with var. This is sample program output, made with samp.

This is small text, made with small. This is big text, made with big.

This is a citation, made with cite. This is a short quotation in the middle of a sentence, made with q.

This sentence ends with a superscript. This sentence ends with a subscript.

This is an abbreviation, made with abbr: WWW. This is an acronym, made with acronym: NATO. This is a term that needs a definition, made with dfn: Yog-Sothoth.

This is a nav element with a ul in it.

This is an unordered list:

This is an ordered list:

  1. Larry
  2. Moe
  3. Curly

This is a definition list:

Defintion Term
Definition data defining the previous term
Another Definition Term
Definition data defining the previous term

This is a form:

Input fields

Select menus

Checkboxes
Textareas

Action buttons

This is an address with breaks:

John Q. Public
123 Main Street
Anywhere, ST 12345

This is a long quotation inside a blockquote:

“I love songs about horses, railroads, land, judgement day, family, hard times, whiskey, courtship, marriage, adultery, separation, murder, war, prison, rambling, damnation, home, salvation, death, pride, humor, piety, rebellion, patriotism, larceny, determination, tragedy, rowdiness, heartbreak, and love. And Mother. And God.” ~ Johnny Cash

This is pre-formatted:

Start in column one.
         Then indent to column ten.
    Then back five spaces.

This is some code:

// This is some code!
var v = 256;
var m = function() { alert('How do you like the service?'); }

This is a figure with image (no CSS) and caption:

A photo placeholder text

Here are 3 more test images with no markup (just img tags).



Here's a table with a border, a caption, colgroups, cols, thead, tfoot, & tbody:

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3

Here's a more modest table.

My Little Table
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9
Footer 1 Footer 2 Footer 3

This is a level 1 callout box.

This is a level 2 callout box.

This is a level 3 callout box.

This is a level 4 callout box.

!!!!! This is a level 5 callout box.