advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.

Posted By: Leech on September 30, 2008

Well, yes.. But how much? I mean, today there are fastest internet connections, and sites are full of images that will weight a lot more than this hack, don't you think?

Posted By: chris5marsh on October 26, 2010

Great reset styles, but I'm not sure the Global Classes section is semantically worthwhile: you're using stylistically descriptive class names. What happens when the design needs to change, and the titles that all used to be centred are now left aligned? Or the images in the gallery that were all floating left now float right? You'll have to go back through the HTML and rename all the elements' class names. If you gave them descriptions like .main-headline or .product-image you would only need to change the CSS.

Just my opinion.

Posted By: e11world on April 27, 2011

I would add the a:focus {outline:none;} to it but other than that, very nice!

You need to login to post a comment.