CSS for a Robust HTML5 Template


/ Published in: CSS
Save to your folder(s)

Has lots of CSS3 goodness in it.


Copy this code and paste it in your HTML
  1. /***
  2. Name: CSS for an HTML5 Template
  3. Date: Jan 2011
  4. Description: Sample layout for HTML5 and CSS3 goodness.
  5. Version: 1.0
  6. Author: You're the author!
  7. Author: URI: www.example.com
  8. ***/
  9.  
  10. /* Imports */
  11. @import url("reset.css");
  12.  
  13. /***** Global *****/
  14. /***Body***/
  15. body {
  16. background: #fff;
  17. color: #333;
  18. font-size: 62.5%; /* Base font size: 10px */
  19. font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  20. margin: 0;
  21. padding: 0;
  22. }
  23.  
  24. /***Headings***/
  25. h1 {font-size:3em;}
  26. h2 {font-size: 1.571em} /* 22px */
  27. h3 {font-size: 1.429em} /* 20px */
  28. h4 {font-size: 1.286em} /* 18px */
  29. h5 {font-size: 1.143em} /* 16px */
  30. h6 {font-size: 1em} /* 14px */
  31.  
  32. h1, h2, h3, h4, h5, h6
  33. {
  34. font-weight: 400;
  35. padding:10px;
  36. }
  37.  
  38. /***Anchors***/
  39. a {outline: 0;}
  40. a img {border: 0px; text-decoration: none;}
  41.  
  42. a:link, a:visited
  43. {
  44. color: #740004;
  45. padding: 0 1px;
  46. text-decoration: underline;
  47. }
  48. a:hover, a:active
  49. {
  50. background-color: #740004;
  51. color: #fff;
  52. text-decoration: none;
  53. text-shadow: 1px 1px 1px #333;
  54. }
  55.  
  56. /***Paragraphs***/
  57. p {padding:10px;font-size:1.4em;}
  58.  
  59. address
  60. {
  61. padding:10px;
  62. }
  63.  
  64. strong, b {font-weight: bold;}
  65. em, i {font-style: italic;}
  66.  
  67. ::-moz-selection {background: #740004; color: #fff;}
  68. ::selection {background: #740004; color: #fff;}
  69.  
  70. /***Lists***/
  71.  
  72. ul li
  73. {
  74. font-size:1.3em;
  75. }
  76.  
  77. /***HTML5 tags***/
  78. header, section, footer,
  79. aside, nav, article, figure
  80. {
  81. display: block;
  82. }
  83.  
  84. /***Layout***/
  85.  
  86. #page
  87. {
  88. width:950px;
  89. margin:0 auto;
  90. min-height:300px;
  91. }
  92.  
  93. header
  94. {
  95. width:950px;
  96. border:1px #fff solid;
  97. background:#efefef;
  98. }
  99.  
  100. section
  101. {
  102. background:#efefef;
  103. width:800px;
  104. overflow:hidden;
  105. margin:0 auto;
  106. float:left;
  107. min-height:inherit;
  108. }
  109.  
  110. aside
  111. {
  112. background:#ccc;
  113. width:150px;
  114. float:right;
  115. overflow:hidden;
  116. min-height:inherit;
  117. }
  118.  
  119. footer
  120. {
  121. width:950px;
  122. height:50px;
  123. overflow:hidden;
  124. background:#666;
  125. color:#ccc;
  126. }
  127.  
  128. footer p
  129. {
  130. padding:5px 10px;
  131. }
  132.  
  133.  
  134. /***Navigation***/
  135.  
  136. nav
  137. {
  138. background:#ccc;
  139. color:#ccc;
  140. }
  141.  
  142. nav ul
  143. {
  144. margin:0;
  145. padding:0;
  146. padding:10px 0 10px 10px;
  147. }
  148. nav ul li
  149. {
  150. display:inline;
  151. list-style-type:none;
  152. }
  153.  
  154. nav li a:link , nav li a:visited
  155. {
  156. font-weight:bold;
  157. font-size:1.5em;
  158. }
  159.  
  160. nav li a:hover
  161. {
  162. background:none;
  163. text-decoration:none;
  164. }
  165.  
  166. /***Video Player***/
  167.  
  168. video
  169. {
  170. width:500px;
  171. display:block;
  172. margin:0 auto;
  173. padding:20px 0 20px 0;
  174.  
  175. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.