Posted By

createinside on 12/18/09


Tagged

css test html xhtml design


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

jannisg
FaustVIII
DesignByWilliam
heretoburma
fhenderson


CSS design tester


 / Published in: XHTML
 

Test your CSS template by pasting this html into the content section. Do this in order to make sure that all html elements are displayed correct in your template.

  1. <h1>Heading 1</h1>
  2. <h2>Heading 2</h2>
  3. <h3>Heading 3</h3>
  4. <h4>Heading 4</h4>
  5. <h5>Heading 5</h5>
  6. <h6>Heading 6</h6>
  7.  
  8. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  9. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <sub>sub text</sub> ut labore et <sup>sup text</sup> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  10.  
  11. <h1>Heading 1</h1>
  12. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  13.  
  14. <h2>Heading 2</h2>
  15. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  16.  
  17. <h3>Heading 3</h3>
  18. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  19.  
  20. <h4>Heading 4</h4>
  21. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  22.  
  23. <h5>Heading 5</h5>
  24. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  25.  
  26. <h6>Heading 6</h6>
  27. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  28.  
  29. <p>
  30. <strong>&lt;strong&gt;</strong><br>
  31. <del>&lt;del&gt; deleted</del><br>
  32. <dfn>&lt;dfn&gt; dfn</dfn><br>
  33. <em>&lt;em&gt; emphasis</em>
  34. </p>
  35. <p>
  36. <a>&lt;a&gt; anchor</a><br>
  37. <a href="http://www.google.com">&lt;a&gt; a + href</a>
  38. </p>
  39.  
  40. <ul>
  41. <li>Unordered list test</li>
  42. <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  43. <li>Yet another element in the list</li>
  44. <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  45. </ul>
  46. <ol>
  47. <li>Ordered list test</li>
  48. <li>Another list element</li>
  49. <li>Yet another element in the list</li>
  50. </ol>
  51.  
  52. <ol>
  53. <li>Ordered list</li>
  54. <li>Here's a nested unordered list
  55. <ul>
  56. <li>Nested Unordered list</li>
  57. <li>Nested ordered list
  58. <ol>
  59. <li>The first</li>
  60. <li>And the second</li>
  61. </ol>
  62. </li>
  63. </ul>
  64. </li>
  65. <li>Ordered List item</li>
  66. <li>Nested Ordered list
  67. <ol>
  68. <li>Some point</li>
  69. <li>Nested Unordered list
  70. <ul>
  71. <li>The first</li>
  72. <li>And the second</li>
  73. </ul>
  74. </li>
  75. </ol>
  76. </li>
  77. </ol>
  78.  
  79. <tr>
  80. <th>Table</th><th>Head</th>
  81. </tr>
  82. <tr>
  83. <td>Tabledata</td><td>Tabledata</td>
  84. </tr>
  85. <tr>
  86. <td colspan="2">Colspan 2</td>
  87. </tr>
  88. <tr>
  89. <td rowspan="2">Rowspan 2</td>
  90. <td>Tabledata</td>
  91. </tr>
  92. <tr>
  93. <td>Tabledata</td>
  94. </tr>
  95.  
  96. <form action="" method="">
  97. <tr>
  98. <td>Text</td>
  99. <td><input type="text" /></td>
  100. </tr>
  101. <tr>
  102. <td>Checkbox</td>
  103. <td><input type="checkbox" /></td>
  104. </tr>
  105. <tr>
  106. <td>Radiobutton</td>
  107. <td><input type="radio" /></td>
  108. </tr>
  109. <tr>
  110. <td>Textarea</td>
  111. </tr>
  112. <tr>
  113. <td>Select</td>
  114. <td><select><option value="1">Value 1</option><option value="2">Value 2</option><option value="3">Value 3</option></select></td>
  115. </tr>
  116. <tr>
  117. <td>&nbsp;</td>
  118. <td><input type="submit" value="send" /></td>
  119. </tr>
  120. </form>

Report this snippet  

You need to login to post a comment.