Base Elements for Styling Check
Following are most, if not all, of the HTML elements you will use in your day-to-day work. They are virgin elements, in that, they have no classes or ids applied. This way you know how your base styling looks. You can use this page to check your styling as you adjust CSS.
You can also add classes to various elements to see how they perform with the classes.
XHTML Elements
-------------------------------------
Paragraphs
This is the first paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
This is second paragraph. Use this paragraph to see what the before and after margins of a paragraph look like between otehr paragraphs. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
This is third paragraph. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
-------------------------------------
Text
This is quoted text
-------------------------------------
Headlines
This is an H1 Headline
This is an H2 Headline
This is an H3 Headline
This is an H4 Headline
This is an H5 Headline
This is an H6 Headline
-------------------------------------
Headlines with Paragraph
This is an H1 Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
This is an H2 Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
This is an H3 Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
This is an H4 Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
This is an H5 Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
This is an H6 Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nec erat. Pellentesque at est. Vivamus vitae massa. Donec enim ligula, suscipit vel, aliquet et, fringilla ac, pede. Sed lacinia purus at enim. Curabitur a purus facilisis massa mollis tempus. Maecenas arcu velit, iaculis luctus, facilisis at, tristique a, purus. Donec lorem turpis, aliquet at, dictum ut, blandit nec, tortor. Nam convallis. Donec imperdiet tempor erat. Quisque ultricies lorem eu nunc.
-------------------------------------
Blockquote
Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. Maecenas lacus pede, imperdiet at, ullamcorper nec, fermentum vel, ipsum. Vivamus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt, pede sed sagittis viverra, tortor turpis dapibus enim, a vehicula pede quam vel lorem.
-------------------------------------
Nested Blockquotes
Level 1. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. tortor turpis dapibus enim, a vehicula pede quam vel lorem.Level 2. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. tortor turpis dapibus enim, a vehicula pede quam vel lorem.Level 3. Curabitur eu libero nec nibh tempus fermentum. Praesent et tellus. Sed semper felis id nibh. Morbi luctus accumsan lectus. Nulla blandit eros. Vestibulum libero risus, rhoncus id, interdum eget, mattis non, magna. Praesent ac enim. tortor turpis dapibus enim, a vehicula pede quam vel lorem.
-------------------------------------
Definition Term
- Definition Term 1
- Definition Description 1
- Definition Description 2
- Definition Description 3
- Definition Term 2
- Definition Description 1
- Definition Description 2
- Definition Description 3
-------------------------------------
Unordered List
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Two
-------------------------------------
Ordered List
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Two
-------------------------------------
Unordered List with Nested Unordered Lists
- Unordered List Item One
- Nested Level 2 Unordered List Item One
- Nested Level 3 Unordered List Item One
- Nested Level 3 Unordered List Item Two
- Nested Level 3 Unordered List Item Three
- Nested Level 2 Unordered List Item Two
- Nested Level 2 Unordered List Item Three
- Nested Level 2 Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
-------------------------------------
Ordered List with Nested Ordered Lists
- Ordered List Item One
- Nested Level 2 Ordered List Item One
- Nested Level 3 Ordered List Item One
- Nested Level 3 Ordered List Item Two
- Nested Level 3 Ordered List Item Three
- Nested Level 2 Ordered List Item Two
- Nested Level 2 Ordered List Item Three
- Nested Level 2 Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
-------------------------------------
Abbreviation
This is an abbreviation-------------------------------------
Acronym
This is an acronym-------------------------------------
Address
This is an address
-------------------------------------
Preformatted Text
This is preformatted text with a return placed here New line begins here New line with tab here New line with multiple sapces here spaces end
-------------------------------------
Computer Code
<div>
<h1>This my code for a headline</h1>
<p>This is my code for a paragraph</p>
</div>
-------------------------------------
Computer Code with pre tag
This is how the same computer code as above
will look when surrounded by the pre tag
<div>
<h1>This my code for a headline</h1>
<p>This is my code for a paragraph</p>
</div>
-------------------------------------
Simple 3 row, 4 column Table
r1c1 | r1c2 | r1c3 | r1c4 |
r2c1 | r2c2 | r2c3 | r2c4 |
r3c1 | r3c2 | r3c3 | r3c4 |
-------------------------------------
Complex Table with Column Groups
Column Group A | ||||
---|---|---|---|---|
Column 1 | Group A1 | Group A2 | Group A3 | |
Column 1 | Group A1 | Group A2 | Group A3 | |
Column Group A | ||||
Description Row 1 | r1c2 | r1c3 | r1c4 | r1c5 |
Description Row 2 | r2c2 | r2c3 | r2c4 | r2c5 |
Description Row 2 | r3c1 | r3c3 | r3c4 | r3c5 |