Test-Drive Your CSS

How to Use This File

You can test-drive your CSS by viewing the source of this page and copying it into a new HTML file.

Uncomment the <link> tag in the head, and link this page to your CSS style sheet to test whether your CSS selectors are global. Since the elements on this page are not nested inside your container elements, they will be unstyled if your selectors are overly-specific.

Keep in mind that if your stylesheet uses CSS resets (which it should), once you link this page to your stylesheet the browser-default margins and padding will go away, and you will need to add your own margin and padding values back in if you haven't done so already.

Include a variety of HTML elements

Test link. Strong text. Emphasized text.

Paragraph

Your test HTML must have multiple paragraphs, so you can check to see whether you've added margin between them to separate one paragraph from the next. It's also a really good idea to have a mix of lists and paragraphs, as each list (ul, ol, and dl) should have the same margin underneath it as your paragraphs do.

It's always a good idea to test your link styles. If a link that's not nested inside a content div or sidebar displays with browser default link styles, it means your link CSS selectors are too specific. Write global link styles first, then override with more specific selectors as needed.

This is a third paragraph, so you can check to see how multiple paragraphs look. It's also a really good idea to have a mix of lists and paragraphs, as each list (ul, ol, and dl) should have the same margin underneath it as your paragraphs do.

Blockquote

This is a paragraph that comes before a blockquote. Use it to be sure your blockquote styles include sufficient white space above and below the blockquote.

This is a blockquote. It should be styled differently from other text on the page.

This is a paragraph following a blockquote. Use it to be sure your blockquote styles include sufficient white space above and below the blockquote.

Heading 2

Heading 3

Heading 4

It's a good idea to test out how a headline followed by a sub-head looks. Sometimes the white space between them needs to be adjusted.

Unordered List

This is a paragraph that comes before an unordered list. Use it to be sure your styles include appropriate white space between paragraphs and lists.

• Unordered List Item 1. Do your unordered lists have bullets?
• List Item 2. Are the bullets properly indented? I like to start by giving unordered lists a margin-left of 1.25em. I may then need to adjust the margin a bit to make the bullets align with the left edges of other content, such as the paragraphs above and below the list. I set my indent in ems so the bullets are properly sized no matter what font-size is used.
• Some List Items will break to more than one line of text. Be sure to add some margin-bottom to your list items to create vertical space between them. This makes it much easier to distinguish two different list items from one item that breaks onto two lines.
• Be sure to add white space below lists, so they don't get too close to the elements that follow them on the page.

Here's a paragraph following an unordered list. Use it to be sure your ul has sufficient margin-bottom to separate the list from whatever follows it in your HTML.

Ordered List

This is a paragraph that comes before an ordered list. Use it to be sure your styles include appropriate white space between paragraphs and lists.

1. Ordered List Item 1. Do your ordered lists have numbers?
2. List Item 2. Are the numbers properly indented? I like to start by giving ordered lists a margin-left of 1.75em. I may then need to adjust the margin a bit to make the numbers align with the left edges of other content, such as the paragraphs above and below the list. I set my indent in ems so the numbers are properly sized no matter what font-size is used.
3. It's a good idea to test an ordered list with at least 10 items, so you can be sure your left indents work with two-digit numbers.
4. Be sure to add white space below lists, so they don't get too close to the elements that follow them on the page.
5. List Item 5
6. List Item 6
7. List Item 7
8. List Item 8
9. List Item 9
10. List Item 10
11. List Item 11
12. List Item 12

Here's a paragraph following an ordered list. Use it to be sure your ol has sufficient margin-bottom to separate the list from whatever follows it in your HTML.

Nested List 1: ol ul

1. List Item 1
   • Nested List Item 1. Are your nested lists properly indented?
   • Some List Items will break to more than one line of text. Be sure to add some margin-bottom to your list items to create vertical space between them. This makes it much easier to distinguish two different list items from one item that breaks onto two lines.
   • Nested List Item 3
2. List Item 2
3. List Item 3

Nested List 2: ul ol

• List Item 1
  1. Nested List Item 1. Are your nested lists properly indented?
  2. Nested List Item 2
  3. Nested List Item 3
• List Item 2
• List Item 3

Definition List

This is the Definition Term

This is the definition description

Does your definition term <dt> stand out from the description <dd> ? (I generally make the <dt> bold, but this is optional and depends on your design.)

Do your definition lists have hanging indents?

Are the indents properly aligned? I like to give <dd> tags a margin-left of 1.25em. This makes them align nicely with the left edges of unordered list text.

Some List Items will break to more than one line of text. Be sure to add some margin-bottom to your list items to create vertical space between them. This makes it much easier to distinguish two different list items from one item that breaks onto two lines.

Be sure to add white space below lists, so they don't get too close to the elements that follow them on the page.

Here's a paragraph following a definition list. Use it to be sure your ol has sufficient margin-bottom to separate the list from whatever follows it in your HTML.