advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

j_junyent on 12/01/07


Tagged

master reset stylesheet


Versions (?)


Who likes this?

22 people have marked this snippet as a favorite

iTony
vali29
Slashman
Saikou
alvaroisorna
basicmagic
copyleft
scyfox
darkphotn
arala22
visuallyspun
stoker
jmelgoza
jfherring
seekup00
wbowers
dkypuros
nerdfiles
adamsimms
gAmUssA
unravelme1
jamarama


Master Stylesheet

Published in: CSS 

URL: http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/

One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.


Plain TextExpand 
  1. /***** Global Settings *****/
  2.  
  3. html, body {
  4. border:0;
  5. margin:0;
  6. padding:0;
  7. }
  8.  
  9. body {
  10. font:100%/1.25 Arial, Helvetica, sans-serif;
  11. }
  12.  
  13. /***** Headings *****/
  14.  
  15. h1, h2, h3, h4, h5, h6 {
  16. margin:0;
  17. padding:0;
  18. font-weight:normal;
  19. }
  20.  
  21. h1 {
  22. padding:30px 0 25px 0;
  23. letter-spacing:-1px;
  24. font-size:2em;
  25. }
  26.  
  27. h2 {
  28. padding:20px 0;
  29. letter-spacing:-1px;
  30. font-size:1.5em;
  31. }
  32.  
  33. h3 {
  34. font-size:1em;
  35. font-weight:bold;
  36. }
  37.  
  38. /***** Common Formatting *****/
  39.  
  40. p, ul, ol {
  41. margin:0;
  42. padding:0 0 1.25em 0;
  43. }
  44.  
  45. ul, ol {
  46. padding:0 0 1.25em 2.5em;
  47. }
  48.  
  49. blockquote {
  50. margin:1.25em;
  51. padding:1.25em 1.25em 0 1.25em;
  52. }
  53.  
  54. small {
  55. font-size:0.85em;
  56. }
  57.  
  58. img {
  59. border:0;
  60. }
  61.  
  62. sup {
  63. position:relative;
  64. bottom:0.3em;
  65. vertical-align:baseline;
  66. }
  67.  
  68. sub {
  69. position:relative;
  70. bottom:-0.2em;
  71. vertical-align:baseline;
  72. }
  73.  
  74. acronym, abbr {
  75. cursor:help;
  76. letter-spacing:1px;
  77. border-bottom:1px dashed;
  78. }
  79.  
  80. /***** Links *****/
  81.  
  82. a,
  83. a:link,
  84. a:visited,
  85. a:hover {
  86. text-decoration:underline;
  87. }
  88.  
  89. /***** Forms *****/
  90.  
  91. form {
  92. margin:0;
  93. padding:0;
  94. display:inline;
  95. }
  96.  
  97. input, select, textarea {
  98. font:1em Arial, Helvetica, sans-serif;
  99. }
  100.  
  101. textarea {
  102. width:100%;
  103. line-height:1.25;
  104. }
  105.  
  106. label {
  107. cursor:pointer;
  108. }
  109.  
  110. /***** Tables *****/
  111.  
  112. table {
  113. border:0;
  114. margin:0 0 1.25em 0;
  115. padding:0;
  116. }
  117.  
  118. table tr td {
  119. padding:2px;
  120. }
  121.  
  122. /***** Wrapper *****/
  123.  
  124. #wrap {
  125. width:960px;
  126. margin:0 auto;
  127. }
  128.  
  129. /***** Global Classes *****/
  130.  
  131. .clear         { clear:both; }
  132. .float-left    { float:left; }
  133. .float-right   { float:right; }
  134.  
  135. .text-left     { text-align:left; }
  136. .text-right    { text-align:right; }
  137. .text-center   { text-align:center; }
  138. .text-justify  { text-align:justify; }
  139.  
  140. .bold          { font-weight:bold; }
  141. .italic        { font-style:italic; }
  142. .underline     { border-bottom:1px solid; }
  143. .highlight     { background:#ffc; }
  144.  
  145. .wrap          { width:960px;margin:0 auto; }
  146.  
  147. .img-left      { float:left;margin:4px 10px 4px 0; }
  148. .img-right     { float:right;margin:4px 0 4px 10px; }
  149.  
  150. .nopadding     { padding:0; }
  151. .noindent      { margin-left:0;padding-left:0; }
  152. .nobullet      { list-style:none;list-style-image:none; }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: iTony on December 1, 2007

thanks for sharing man. I just have a question, wouldn't it make the files more heavy for extra code or extra linking? I am worried about that. I do reset the styles of the webpages a make, but not as throughly as this, just the ones that I really want control on.

You need to login to post a comment.