XHTML / CSS Style Guide

What is this all about? If you are one of the many developers who use a CSS reset, and/or provide content management systems then this tool is for you. Use this style guide to ensure the most common HTML elements have proper styling. It is easy to forget to style an HTML element, only to find a client has later used it on a page. This of course results in design elements that don't fit. For a more in depth explanation, read the blog post announcing this tool.

Load a css stylesheet via full URL (requires javascript)

:


Download and distribute for free, please leave the credit in the head. All you have to do is attach your stylesheet and you can get a clear representation of what common HTML styling has been done and what needs tweaking.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.
  6. Vivamus vestibulum nulla nec ante.
  7. Praesent placerat risus quis eros.
  8. Fusce pellentesque suscipit nibh.
  9. Integer vitae libero ac risus egestas placerat.
  10. Vestibulum commodo felis quis tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Nunc dignissim risus id metus.
Cras ornare tristique elit.
Vivamus vestibulum nulla nec ante.
Praesent placerat risus quis eros.
Fusce pellentesque suscipit nibh.
Integer vitae libero ac risus egestas placerat.
Vestibulum commodo felis quis tortor.
	#computer_code {
		text-decoration: none;
		font-weight: bold;
		line-height: 1.5em;
	}
Example Image 1, floated right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Example Image 2, floated left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Weekday Date Manager Qty
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Total4923

First paragraph of the quotation.

Second paragraph of the quotation.

— John Doh

12345 Avenue Street, Paris, Michigan, 48152

John Pallot Doe
JD Inc
123 Five Street
Cityville , MI , 48194 USA
545-555-5454

This hCard created with the hCard creator.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading Level 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.
  6. Vivamus vestibulum nulla nec ante.
  7. Praesent placerat risus quis eros.
  8. Fusce pellentesque suscipit nibh.
  9. Integer vitae libero ac risus egestas placerat.
  10. Vestibulum commodo felis quis tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Nunc dignissim risus id metus.
Cras ornare tristique elit.
Vivamus vestibulum nulla nec ante.
Praesent placerat risus quis eros.
Fusce pellentesque suscipit nibh.
Integer vitae libero ac risus egestas placerat.
Vestibulum commodo felis quis tortor.
		#computer_code {
			text-decoration: none;
			font-weight: bold;
			line-height: 1.5em;
		}
Example Image 1, floated right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Example Image 2, floated left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Weekday Date Manager Qty
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Total4923

First paragraph of the quotation.

Second paragraph of the quotation.

— John Doh

12345 Avenue Street, Paris, Michigan, 48152

John Pallot Doe
JD Inc
123 Five Street
Cityville , MI , 48194 USA
545-555-5454

This hCard created with the hCard creator.