Advanced Search

CSS for a Robust HTML5 Template

/ Published in: CSS
Save to your folder(s)
Has lots of CSS3 goodness in it.

Expand | Embed | Plain Text

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.