Advanced Search

Master CSS Template (including Eric Meyers CSS Reset)

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* index
  2. -------------------------------------------------------------------------------------- */
  3.  
  4. /*
  5.  
  6. * Filename: 			style.css
  7. * Description: 			global CSS (master)
  8. * Version:          	        1.0.0 (YYYY-MM-DD)
  9. * Website:			website-url
  10. * Author:			authorname
  11.  
  12. == STRUCTURE ============================================================================
  13.  
  14. * Page width:			990 px
  15. * Number of columns:	        1
  16.  
  17. */
  18.  
  19.  
  20.  
  21. /* colorscheme
  22. --------------------------------------------------------------------------------------- */
  23.  
  24. /*
  25. white (bg): 	   		   	#fff
  26. grey (intro text):			#333
  27. grey (h3 headlines +contact bg)    	#a3a3a3
  28. black (text): 				#000
  29. red (link active): 		   	#670001
  30. dark red (link hover + visited): 	#431611
  31. */
  32.  
  33.  
  34.  
  35. /* Browser CSS-Reset
  36. --------------------------------------------------------------------------------------- */
  37. /* Eric Meyer's Reset Reloaded */
  38. /* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
  39. html, body, div, span, applet, object, iframe,
  40. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  41. a, abbr, acronym, address, big, cite, code,
  42. del, dfn, em, font, img, ins, kbd, q, s, samp,
  43. small, strike, strong, sub, sup, tt, var,
  44. dl, dt, dd, ol, ul, li,
  45. fieldset, form, label, legend,
  46. table, caption, tbody, tfoot, thead, tr, th, td {
  47. 	margin: 0;
  48. 	padding: 0;
  49. 	border: 0;
  50. 	outline: 0;
  51. 	font-weight: inherit;
  52. 	font-style: inherit;
  53. 	font-size: 100%;
  54. 	font-family: inherit;
  55. 	vertical-align: baseline;
  56. 	}	
  57. /* remember to define focus styles! */
  58. :focus {outline: 0;}
  59. body {
  60. 	line-height: 1;
  61. 	color: white;
  62. 	background: black;
  63. 	}	
  64. ol, ul {list-style: none;}	
  65. /* tables still need 'cellspacing="0"' in the markup */
  66. table {border-collapse: separate; border-spacing: 0;}	
  67. caption, th, td {text-align: left; font-weight: normal;}
  68. blockquote:before, blockquote:after,
  69. q:before, q:after {content: "";}
  70. blockquote, q {quotes: "" "";}
  71. /* images and linked images without border */
  72. img, a img {border: 0;}
  73.  
  74.  
  75. /* globals 
  76. --------------------------------------------------------------------------------------- */
  77.  
  78. html {background: #fff;}
  79.  
  80. body {
  81. 	background: #fff url(image.jpg) no-repeat left top;
  82. 	color: #000;
  83. 	display: table;
  84. 	font-size: 100%;  /* reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px. */
  85. 	width: 100%; 				 /* This rule is primarily there for Internet Explorer 6 and below on Windows */
  86. 	}
  87.  
  88. html>body {
  89. 	font-size: 16px;  /* sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera */
  90. 	}
  91.  
  92. a { 
  93. 	border-bottom: 1px solid #670001;
  94. 	padding-bottom: 1px; 
  95. 	text-decoration: none;
  96. 	}
  97.  
  98. a:link, a:visited {color: #670001;}
  99.  
  100. a:hover {
  101. 	background: #431611;
  102. 	border-bottom: 0;
  103. 	color: #fff;
  104. 	}
  105.  
  106.  
  107. /* Typography
  108. --------------------------------------------------------------------------------------- */
  109. p {
  110. 	font: 1em/1.75em Georgia, "Times New Roman", Times, serif;
  111. 	margin: 0;
  112. 	text-indent:0; 
  113. 	}
  114.  
  115. p+p {text-indent:2em;}
  116.  
  117. .first {text-indent: 0;}
  118.  
  119.  
  120. h1 {
  121. 	border-bottom: 1px dotted #a3a3a3;
  122. 	font: 3em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif;
  123. 	font-style: italic;
  124. 	font-weight: bold;
  125. 	margin-top: 80px;
  126. 	margin-left: 310px;
  127. 	margin-bottom: 1em;
  128. 	padding:0 30px 30px 20px;
  129. 	}
  130.  
  131. h2 {
  132.  
  133. 	font: 2.5em/1.75em Georgia, "Times New Roman", Times, serif;
  134. 	margin-top: 1em;
  135. 	margin-bottom: 0em;
  136. 	}
  137.  
  138. h3 {
  139. 	color: #a3a3a3;
  140. 	font: 1.88em/0.934em Georgia, "Times New Roman", Times, serif;
  141. 	margin-top: 1.068em;
  142. 	margin-bottom: 0em;
  143. 	}
  144.  
  145. h4 {
  146. 	color: #fff;
  147. 	font: 2em/1.5em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif;
  148. 	font-style: italic;
  149. 	}
  150.  
  151. h5 {color: #ccc; font: 1.25em/1.75em Georgia, "Times New Roman", Times, serif;}  
  152.  
  153. .amp {
  154. 	font: 1em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif;
  155. 	font-style: italic;
  156. 	}  /* use the best Ampersand */
  157.  
  158.  
  159. /* layout elements
  160. --------------------------------------------------------------------------------------- */ 
  161.  
  162. /* wrapper */
  163.  
  164.  
  165. /* nav */
  166.  
  167.  
  168. /* content */
  169.  
  170.  
  171. /* footer */
  172.  
  173.  
  174.  
  175. /* end of this stylesheet
  176. -------------------------------------------------------------------------------------- */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.