Test CSS
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
Nested List 1: ol ul
- 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
- List Item 2
- List Item 3
Nested List 2: ul ol
- List Item 1
- Nested List Item 1. Are your nested lists properly indented?
- Nested List Item 2
- Nested List Item 3
- List Item 2
- List Item 3
Paragraph
Heading 3
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.
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 is a blockquote. It should be styled differently from other text on the page.
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. 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.
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.
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.
- List Item 1. Do your unordered lists have bullets?
- List Item 2. Are the bullets properly indented? I like to give unordered lists a margin-left of 1.25em. This makes the bullets align with the left edges of other content, 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.
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.
- List Item 1. Do your ordered lists have numbers?
- List Item 2. Are the numbers properly indented? I like to give ordered lists a margin-left of 1.75em. This makes the bullets align with the left edges of other content, no matter what font-size is used.
- 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.
- Be sure to add white space below lists, so they don’t get too close to the elements that follow them on the page.
- List Item 5
- List Item 6
- List Item 7
- List Item 8
- List Item 9
- List Item 10
- List Item 11
- List Item 12
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.
- Definition List
- Does your definition term <dt> stand out from the description <dd> ? (I often make them 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.
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.
Test link. Strong text. Emphasized text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue nunc non pulvinar tempor. Nam tincidunt hendrerit lacinia. Praesent tempor lectus maximus dapibus efficitur. Fusce eu ex dui. Praesent sit amet ultrices lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dolor lectus, vestibulum non augue sed, finibus condimentum justo. Morbi tortor massa, commodo vestibulum nisi et, lobortis interdum urna. Ut eu magna sed velit blandit rutrum a vitae urna. Morbi eget quam cursus neque euismod facilisis et sit amet risus. Pellentesque gravida laoreet nisi, id placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis laoreet nisl congue elit pharetra pulvinar.
Vivamus bibendum libero nunc, vitae rutrum urna aliquam at. Aenean pharetra lectus vitae turpis commodo, et mollis nibh imperdiet. Integer non ultricies sapien, eget tincidunt quam. Etiam semper et tellus quis maximus. Pellentesque non ullamcorper elit. Vivamus et ipsum luctus, aliquet est sed, scelerisque arcu. Nullam et suscipit tellus. Etiam condimentum ultrices iaculis. Proin sit amet tempus mauris, id elementum nisi. Quisque tempus tortor sit amet massa dictum, eu euismod est vestibulum. Pellentesque euismod condimentum tempus. Nullam id quam condimentum lectus placerat lobortis mollis non orci.
Integer at mi iaculis, pretium est ut, ultricies arcu. Phasellus egestas massa a rutrum pulvinar. Aenean egestas congue porttitor. In sed quam eu nisl porta commodo. Nullam ac vestibulum nulla. Sed tincidunt auctor varius. Suspendisse sodales auctor urna, id maximus urna sodales in. Praesent pharetra iaculis odio, sed luctus eros pharetra a. Aenean porta dapibus nibh, nec bibendum augue bibendum nec. Curabitur tristique nibh leo, id tincidunt libero dictum eget. Quisque non erat in diam malesuada malesuada. Fusce quis tincidunt sem. Sed pretium ligula nec ante pellentesque, nec gravida est euismod.
Curabitur finibus dui et sem fermentum, in tristique mauris accumsan. In lacus enim, vulputate nec posuere et, malesuada in ipsum. Curabitur ornare lobortis bibendum. Donec vel nisi magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eleifend lectus et augue bibendum interdum. Nulla cursus lacus dolor, vitae aliquam nulla ullamcorper id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mattis commodo sapien at fringilla. Nullam fringilla semper pharetra. Nullam sit amet leo sit amet augue dictum faucibus. Vivamus sed ullamcorper velit, ac fringilla quam.
This is a test comment. I enjoy commenting in a test kind of way.