Advanced Search

Sample Markup for CSS Developers v0.1

/ Published in: HTML
Save to your folder(s)
no need for Lorem ipsum if you can insert something that makes more sense and even helps you address more HTML elements with the CSS you're about to write.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <p>This samplpe markup provides various HTML elements and how they would appear in your design. You might want to use the Firefox extension Firebug to spot each element.</p>
  2. <p>Lorem ipsum sensibus <a href="http://www.example.com/element/examples" title="Example link, goes nowhere">link eleifend reprehendunt</a> ex nam, vocent recusabo omittantur ei nam. Cum te altera numquam, in dicta corpora mel.
  3. She said, <q>Quotation element verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel.</q> Sed at lorem legere electram.</p>
  4. <blockquote cite="http://www.example.com/blockquote" title="Example of blockquote">
  5. 	<p>Partem evertitur has ex. <a href="http://www.example.com/element/link" title="Element link child">In vix hinc munere</a> oportere, vel in dicunt intellegebat. Puto soluta at sed. An vim ignota eirmod, no vulputate intellegebat vix!</p>
  6. 	<p>At urbanitas suscipiantur sea, dicant legimus mei et, maiorum propriae intellegat at sed!</p>
  7. </blockquote>
  8. <table summary="Shows Grade Statistics.">
  9. 	<caption>This table holds weird numbers.<br />
  10. 		<small>(Find out more about numbers on <a href="http://www.wikipedia.org/" title="Yep. You can place inline-elements within a table's caption">Wikipedia</a>)</small>
  11. 	</caption>
  12. 	<thead>
  13. 		<tr>
  14. 			<th></th>
  15. 			<th scope="col">A</th>
  16. 			<th scope="col">B</th>
  17. 			<th scope="col">C</th>
  18. 			<th scope="col">D</th>
  19. 			<th scope="col">E</th>
  20. 			<th scope="col">F</th>
  21. 			<th scope="col">G</th>
  22. 		</tr>
  23. 	</thead>
  24. 	<tfoot>
  25. 		<tr>
  26. 			<td></td>
  27. 			<td><a href="#appendix"><sup>*</sup></a></td>
  28. 			<td><a href="#appendix"><sup>**</sup></a></td>
  29. 			<td><a href="#appendix"><sup>***</sup></a></td>
  30. 			<td><a href="#appendix"><sup>1</sup></a></td>
  31. 			<td><a href="#appendix"><sup>2</sup></a></td>
  32. 			<td><a href="#appendix"><sup>3</sup></a></td>
  33. 			<td><a href="#appendix"><sup>tfoot</sup></a></td>
  34. 		</tr>
  35. 	</tfoot>
  36. 	<tbody>
  37. 		<tr>
  38. 			<th id="th137750E80000" scope="row">Biology</th>
  39. 			<td headers="th137750E80000">65</td>
  40. 			<td headers="th137750E80000">6</td>
  41. 			<td headers="th137750E80000">5</td>
  42. 			<td headers="th137750E80000">5</td>
  43. 			<td headers="th137750E80000">6</td>
  44. 			<td headers="th137750E80000">6</td>
  45. 			<td headers="th137750E80000">6</td>
  46. 		</tr>
  47. 		<tr>
  48. 			<th id="th137750E80100" scope="row">Physics</th>
  49. 			<td headers="th137750E80100">65</td>
  50. 			<td headers="th137750E80100">6</td>
  51. 			<td headers="th137750E80100">5</td>
  52. 			<td headers="th137750E80100">5</td>
  53. 			<td headers="th137750E80100">6</td>
  54. 			<td headers="th137750E80100">6</td>
  55. 			<td headers="th137750E80100">6</td>
  56. 		</tr>
  57. 		<tr>
  58. 			<th id="th137750E80200" scope="row">Chemistry</th>
  59. 			<td headers="th137750E80200">65</td>
  60. 			<td headers="th137750E80200">6</td>
  61. 			<td headers="th137750E80200">5</td>
  62. 			<td headers="th137750E80200">5</td>
  63. 			<td headers="th137750E80200">6</td>
  64. 			<td headers="th137750E80200">6</td>
  65. 			<td headers="th137750E80200">6</td>
  66. 		</tr>
  67. 		<tr>
  68. 			<th id="th137750E80300" scope="row">Totals</th>
  69. 			<td headers="th137750E80300">65</td>
  70. 			<td headers="th137750E80300">12</td>
  71. 			<td headers="th137750E80300">45</td>
  72. 			<td headers="th137750E80300">86</td>
  73. 			<td headers="th137750E80300">56</td>
  74. 			<td headers="th137750E80300">56</td>
  75. 			<td headers="th137750E80300">56</td>
  76. 		</tr>
  77. 	</tbody>
  78. </table>
  79. <!-- Table Template Ends -->
  80.  
  81. <p>Let's continue with... Yes! Yet another paragraph! <span>This text is within a span element</span> consectetuer, vel quot malorum no! Has eu mollis iracundia. Eam latine conclusionemque ne. Et cibo veritus dissentiet eum, sed legendos qualisque evertitur te.</p>
  82. <!-- the markup to display this code listing is generated with Code2CSS @see www.erikpoehler.com/code2css/ -->
  83. <ol class="code php">
  84. 	<li class="t0 odd"><code>// Use of the pre element for PHP code</code></li>
  85. 	<li class="t0"><code>function get_blog_lang() {</code></li>
  86. 	<li class="t2 odd"><code>if ( function_exists('language_attributes') )</code></li>
  87. 	<li class="t3"><code>return language_attributes();</code></li><li class="t0 odd"><code>}</code></li>
  88. </ol>
  89. <p>Eu facete perfecto nec, some CSS code: <code class="css">/* this is &lt;code&gt; element placed inline */ div#footer{text-align:center;}</code> libris doming eos ex, tota omnium electram ius ad. Has eu vituperatoribus mediocrem. Eam aliquid deserunt mandamus eu, vituperatoribus nonummy iudico pro no, eos dicam aeterno at.</p>
  90.  
  91. <pre>&lt;?php
  92. /**
  93.  * This code snippet is
  94.  * actually placed within
  95.  * a &lt;pre&gt; block.
  96.  * @uses DefaultClass
  97.  * @see http://example.com/DefaultClass/
  98.  * 
  99.  */
  100. $main = MainClass::getInstance();
  101. $main->setDoctype('xhtml');
  102. $main->show();
  103. ?&gt;
  104. </pre>
  105.  
  106. <p>Let's leave those boring data tables and code behind and move on to something fun: lists</p>
  107. <ul>
  108. 	<li>Unordered list example item first</li>
  109. 	<li>Magna everti <a href="http://www.example.com/element/link" title="Element link child">diceret</a> no qui</li>
  110. 	<li>d discere urbanitas definitiones quo 
  111. 		<ul>
  112. 			<li>a nested list.</li>
  113. 			<li>argumentum quo id 
  114. 				<ul>
  115. 					<li>second level <samp>&lt;ul&gt;-nesting</li>
  116. 					<li>Ei nibh similique eam</li>
  117. 					<li>Vix mediocrem sententiae ne</li>
  118. 				</ul>
  119. 			</li>
  120. 			<li>takimata eloquentiam</li>
  121. 		</ul>
  122. 	</li>
  123. 	<li>Usu libris albucius cu, kasd contentiones no eos</li>
  124. 	<li>Zzril forensibus dissentias ex pro</li>
  125. </ul>
  126. <p>Ea has <em>emphasis text is here</em> vocent aliquid dolorem, te utinam discere eripuit cum! Id cum <strong>strong emphasis text epicuri evertitur</strong>, cu summo nullam mucius vim? Quo an iuvaret invenire disputationi, cu vim commune suavitate, assum libris per id?</p>
  127. <p>Ius <strong>bold text is here</strong> probatus rationibus id. Novum <em>italicized text is here</em> utinam democritum ad vim! Illud fabellas imperdiet vis et, et stet essent appareat quo!</p>
  128. <ol>
  129. 	<li>Ordered list example item first</li>
  130. 	<li>Magna everti <a href="http://www.example.com/element/link" title="Element link child">diceret</a> no qui</li>
  131. 	<li>d discere urbanitas definitiones quo 
  132. 		<ol>
  133. 			<li>nested, ordered list. aeterno consulatu</li>
  134. 			<li>argumentum quo id 
  135. 				<ol>
  136. 					<li>latine scribentur</li>
  137. 					<li>possim menandri</li>
  138. 				</ol>
  139. 			</li>
  140. 			<li>takimata eloquentiam</li>
  141. 		</ol>
  142. 	</li>
  143. 	<li>Usu libris albucius cu, kasd contentiones no eos</li>
  144. 	<li>Zzril forensibus dissentias ex pro</li>
  145. </ol>
  146. <p>Eum error accommodare ea! Cu nam modo iusto! His in quot a citation from <cite title="Example citation">Designing with Web Standards</cite> Paulo efficiendi, in aliquip nostrum eam! Cu sea dicunt intellegam consequuntur, omnis adipiscing id est?</p>
  147. <p>An abbreviation of <abbr title="Journal of the American Medical Association">JAMA</abbr> reque illum audiam nam, aeterno consulatu argumentum quo id, soluta mandamus ei vix? Eu qui alii nobis propriae, has dolor molestiae ut. His aliquid pertinax in, alterum facilis takimata in mea. Nec mazim aeque an. Ius ad errem saperet postulant, equidem perpetua mediocrem est at.</p>
  148. <blockquote cite="http://www.example.com/" title="Example of nested blockquote">
  149. 	<p>Et mea elit perpetua torquatos, id qui aeque albucius instructior? Te eum quis doctus delicata. Vim alia erant salutatus ad. Ius etiam scriptorem ne? Iracundia appellantur vix at, ut debitis vituperatoribus mea!</p>
  150. 	<blockquote>
  151. 		<p>Nested Blockquote. Lorem ipsum sensibus eleifend reprehendunt ex nam, vocent recusabo omittantur ei nam. Cum te altera numquam, in dicta corpora mel. Verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel.</p>
  152. 	</blockquote>
  153. 	<p>Magna everti diceret no qui, id discere urbanitas definitiones quo? Dicant recusabo interesset ne vim, in mei ignota deterruisset!</p>
  154. </blockquote>
  155. <p>Ferri graece prompta ex duo, latine scribentur eu cum, nam voluptua oportere definitiones id.</p>
  156. <p>Deleted text: <del>Duo in odio aliquam, sit aliquam comprehensam eu. Liber virtute detraxit ei vix! Ex eam wisi aliquam adipisci. An usu platonem qualisque, ex platonem maluisset constituam sea.</del></p>
  157. <p>Inserted text: <ins>Eos ex tractatos definitiones. Choro timeam sed ut, te qui cibo semper phaedrum, appetere delicata cu eos. Periculis dignissim ex per.</ins></p>
  158. <div>
  159. 	<p>This last paragraph is wrapped in a <samp>$lt;div&gt;<samp> Lorem inermis cotidieque usu no, delenit scripserit reprehendunt qui ad. Ne eum recteque splendide. <strong>Qui possim menandri referrentur ea, assentior theophrastus id vis, id feugiat persecuti est!</strong></p>
  160. </div>

URL: http://contactsheet.de/sample-markup-for-css-developers.xhtml

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.