Posted By

j_junyent on 12/01/07


Tagged

master reset stylesheet


Versions (?)

Who likes this?

150 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
anevaude
jamarama
kenpar
Mithun
jamesming
blackabee
mikemckearingmailcom
sudhakmy
Leech
joshontheweb
salibaray
Nix
inkdeep
thinkcirca
dshigdon
sarfraznawaz2005
soumitrabhat
Bluewall
owais
fragmentist
tmbrenneke
onetwentysix
dukeRD
jeffery2k2610
tandouri
visualpropaganda
jmiller
gregorio
KF
sultano
jay3917
ditzah
risico
maikelnait
portalpie
davidsi
jaff
hiramvb
colingardom
dsoms
janvdm
lori
verhaeg
bok
ahmedalttai
pchengsf
naeemnur
adriennepalmer
robknight
bethanyer
bobbym245
crawlspace
jamiedollard
LeeRJohnson
armanx
seanpowell
gelogenic
Astraion
smartfaceweb
MrFjords
ijasnijas
geoffreydv
mmcachran
lifewishes
sjacunningham
Carolyne
sikwan
trusktr
xcessi
steviraab
booski
passion
kwameboame
RvDesigns
tspitzr
WFendler
aegony
garthhumphreys
eiie
asifjavedall
inspired12
michellebracken
JCMais
gamblelyn
okwari
qubestream
silverskymedia
bkgoh
mdmartiny1977
onwardonward
TraceyM
neex123
luckystokes
jdenmark
jillella
stavros
mladoux
ljayz
karstenrowe
albertomori
dechuck
dajocko
jondiscipulo
dubogii
banjomamo
wirenaught
ubezpieczenia
codex
ions
wimster
geek4evr
robotici
kststudio
e11world
shalomfriss
drappendix
rcraven
ryanfiorini
welancers
unibox
symsec
dannie_manji
clark-kim
lookingforsome
erikgeerling
Painfreepc
ScottNYC
StephenOdieleHarlow
jakkrith


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.

  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.