We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.


Posted By

jonhenshaw on 09/01/08


Tagged

css test html xhtml styleguide


Versions (?)


Who likes this?

64 people have marked this snippet as a favorite

Scooter
jonhenshaw
basicmagic
wizard04
doublej
sbbath
jfherring
flashparry
hans
titox
eriksagen
rubensarrio
salibaray
l1r
Kerrick
wordGeek
squiggy
jpsirois
sveggiani
fmontes
trdunsworth
koorb
flurk118
frujo
johnloy
davebowker
martinlucas
exanimo9
beneberle
handcoding
danielfilho
andresvidal
shabith
adamsimms
glends
raptrex
savintsev
visualisierte
cschlens
pabloroman
kmartiin
tmbrenneke
LeeRJohnson
rickfu
dukeRD
vali29
thinkcirca
jocko21
jchristenbury
j_junyent
roccostorm
scott2b
j4kp07
Homitsu
sspitler01
inthewayboy
ditzah
konpao
dobata
sapphiriq
eivind
jasonevers
codeclarified
monodesigns


HTML Test Page for CSS Style Guide


Published in: HTML 


URL: http://www.sitefromscratch.com/content/html-xhtml-css-testing

Great page for testing the style guide for a website.

  1. <!-- Sample Content to Plugin to Template -->
  2. <h1>CSS Basic Elements</h1>
  3.  
  4. <p>The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.</p>
  5.  
  6. <hr />
  7.  
  8. <h1 id="headings">Headings</h1>
  9.  
  10. <h1>Heading 1</h1>
  11. <h2>Heading 2</h2>
  12. <h3>Heading 3</h3>
  13. <h4>Heading 4</h4>
  14. <h5>Heading 5</h5>
  15. <h6>Heading 6</h6>
  16.  
  17. <small><a href="#wrapper">[top]</a></small>
  18. <hr />
  19.  
  20.  
  21. <h1 id="paragraph">Paragraph</h1>
  22.  
  23. <img style="width:250px;height:125px;float:right" src="images/css_gods_language.png" alt="CSS | God's Language" />
  24. <p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> 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. 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.</p>
  25.  
  26. <p>Lorem ipsum dolor sit amet, <em>emphasis</em> 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. 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.</p>
  27.  
  28. <small><a href="#wrapper">[top]</a></small>
  29. <hr />
  30.  
  31. <h1 id="list_types">List Types</h1>
  32.  
  33. <h3>Definition List</h3>
  34. <dl>
  35. <dt>Definition List Title</dt>
  36. <dd>This is a definition list division.</dd>
  37. </dl>
  38.  
  39. <h3>Ordered List</h3>
  40. <ol>
  41. <li>List Item 1</li>
  42. <li>List Item 2</li>
  43. <li>List Item 3</li>
  44. </ol>
  45.  
  46. <h3>Unordered List</h3>
  47. <ul>
  48. <li>List Item 1</li>
  49. <li>List Item 2</li>
  50. <li>List Item 3</li>
  51. </ul>
  52.  
  53. <small><a href="#wrapper">[top]</a></small>
  54. <hr />
  55.  
  56. <h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>
  57.  
  58. <legend>Legend</legend>
  59.  
  60. <p>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. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
  61.  
  62. <form>
  63. <h2>Form Element</h2>
  64.  
  65. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
  66.  
  67. <p><label for="text_field">Text Field:</label><br />
  68. <input type="text" id="text_field" /></p>
  69.  
  70. <p><label for="text_area">Text Area:</label><br />
  71. <textarea id="text_area"></textarea></p>
  72.  
  73. <p><label for="select_element">Select Element:</label><br />
  74. <select name="select_element">
  75. <optgroup label="Option Group 1">
  76. <option value="1">Option 1</option>
  77. <option value="2">Option 2</option>
  78. <option value="3">Option 3</option>
  79. <optgroup label="Option Group 2">
  80. <option value="1">Option 1</option>
  81. <option value="2">Option 2</option>
  82. <option value="3">Option 3</option>
  83. </select></p>
  84.  
  85. <p><label for="radio_buttons">Radio Buttons:</label><br />
  86. <input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
  87. <input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
  88. <input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
  89. </p>
  90.  
  91. <p><label for="checkboxes">Checkboxes:</label><br />
  92. <input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
  93. <input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
  94. <input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
  95. </p>
  96.  
  97. <p><label for="password">Password:</label><br />
  98. <input type="password" class="password" name="password" />
  99. </p>
  100.  
  101. <p><label for="file">File Input:</label><br />
  102. <input type="file" class="file" name="file" />
  103. </p>
  104.  
  105.  
  106. <p><input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" />
  107. </p>
  108.  
  109.  
  110.  
  111. </form>
  112.  
  113.  
  114. <small><a href="#wrapper">[top]</a></small>
  115. <hr />
  116.  
  117. <h1 id="tables">Tables</h1>
  118.  
  119. <table cellspacing="0" cellpadding="0">
  120. <tr>
  121. <th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
  122. </tr>
  123. <tr>
  124. <td>Division 1</td><td>Division 2</td><td>Division 3</td>
  125. </tr>
  126. <tr class="even">
  127. <td>Division 1</td><td>Division 2</td><td>Division 3</td>
  128. </tr>
  129. <tr>
  130. <td>Division 1</td><td>Division 2</td><td>Division 3</td>
  131. </tr>
  132.  
  133.  
  134. <small><a href="#wrapper">[top]</a></small>
  135. <hr />
  136.  
  137. <h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
  138.  
  139. <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. 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. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p>
  140.  
  141. <pre><p>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. 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. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p></pre>
  142.  
  143. "This stylesheet is going to help so freaking much." <br />-Blockquote
  144.  
  145. <small><a href="#wrapper">[top]</a></small>
  146. <!-- End of Sample Content -->

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: Kerrick on February 16, 2009

Thank you for preserving this script, I've found it very useful in tying up loose ends after a CSS reset. Since I design for a CMS for my clients, they can put code that I haven't expected into the site, and I wouldn't want it to come out looking plain due to the CSS reset. This helps me so much!

Posted By: Netlumination on April 30, 2009

Having a page that runs through the default HTML is such a good idea for CSS.

This is exactly what I was looking for, thanks.

Posted By: demixo on June 18, 2009

Gracias, esto me sirve mucho para elaborar mi guía de estilo.

Posted By: jlizarraga on June 19, 2009

Sweet, this is perfect for ground-up WordPress templates!

Posted By: hcabbos on June 27, 2009

Very thorough! Perhaps adding a table caption would be a good idea.

Posted By: sapphiriq on January 4, 2010

THANKS! that is what i need! yoohoo!

You need to login to post a comment.