Master CSS Template (including Eric Meyers CSS Reset)


 / Published in: CSS
 

  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
Posted By: SevenLayersDesign on March 4, 2011

Looks useful although I prefer the revised Meyer reset by Richard Clark that adds support for HTML5 elements. Very nice jumping of point though. Thanks!

You need to login to post a comment.