Posted By

wizard04 on 06/26/09


Tagged

css reset


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

spazione
aleksanderek


DzR Master Stylesheet (Part I, Reset)


 / Published in: CSS
 

A very thorough CSS reset stylesheet I created for HTML 4.01 using CSS 3 (and older).

[Part II](http://snipplr.com/view/16354/"DzR Master Stylesheet (Part II, Classes)") [Part III](http://snipplr.com/view/16355/ "DzR Master Stylesheet (Part III, IE)")

  1. /**************************************************************************************************/
  2. /*This stylesheet was created for HTML 4.01 using CSS 3 (and older)
  3. /*Tested on Windows versions of Firefox 1.5-3.0, IE 6-7, Safari 3.2, Opera 9.2-9.6, and K-Meleon 1.5
  4. /*
  5. /*I've put helpful classes into a separate stylesheet. PLEASE CUSTOMIZE THAT STYLESHEET AS NOTED!
  6. /*IE-specific stylesheets include fixes or fallbacks for both of these stylesheets, so comment out relevant rules
  7. /* if you won't be using the classes.
  8. /*
  9. /*Because of too many browser inconsistencies, I have:
  10. /*- left the styling of form elements up to the browser (for the most part).
  11. /*- not set the outline property on anything (e.g., `:focus`).
  12. /*
  13. /*Elements included:
  14. /* Obsolete:
  15. /* app, bgsound, blink, comment, listing, marquee, multicol, nobr, plaintext, sound, spacer, wbr, xmp
  16. /* Deprecated:
  17. /* applet, basefont, center, dir, font, isindex, menu, s, strike, u
  18. /* Non-standard:
  19. /* embed, noembed
  20. /* Standard:
  21. /* a, abbr, acronym, address, area, b, base, bdo, big, blockquote, body, br, button, caption, cite,
  22. /* code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6,
  23. /* head, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, map, meta, noframes, noscript,
  24. /* object, ol, optgroup, option, p, param, pre, q, samp, script, select, small, span, strong, style, sub, sup,
  25. /* table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, ul, var
  26. /*
  27. /*1.0: The Basics
  28. /*2.0: Block-Level Elements
  29. /* 2.1: Headers
  30. /* 2.2: Lists
  31. /* 2.3: Tables
  32. /*3.0: Inline Elements
  33. /* 3.1: Hyperlinks
  34. /*4.0: Forms
  35. /* 4.1: Buttons
  36. /* 4.2: Text Inputs
  37. /* 4.3: Choices
  38. /*5.0: Media-Specific
  39. /* 5.1: Paged Media
  40. /* 5.2: Audible Media
  41. /**************************************************************************************************/
  42.  
  43. /***********************/
  44. /*** 1.0: The Basics ***/
  45. /***********************/
  46.  
  47. bgsound, comment, sound { display:none; }
  48. listing, xmp { white-space:pre; }
  49. app, blink, listing, marquee, multicol, nobr, plaintext, spacer, wbr, xmp,
  50. applet, center, dir, font, menu, s, strike, u,
  51. embed, noembed,
  52. a, abbr, acronym, address, b, big, blockquote, body, br, caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em,
  53. fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, ins, kbd, label, legend, li, map,
  54. noframes, noscript, object, ol, optgroup, option, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, tfoot,
  55. th, thead, tr, tt, ul, var {
  56. margin:0;
  57. padding:0;
  58. border:0 solid #000;
  59. font-style:inherit;
  60. font-weight:inherit;
  61. font-size:inherit;
  62. text-decoration:inherit;
  63. background-color:transparent;
  64. color:inherit;
  65. line-height:1.25;
  66. font-family:inherit;
  67. text-align:inherit;
  68. vertical-align:baseline;
  69. }
  70.  
  71. html {
  72. background-color:#FFF;
  73. }
  74. body {
  75. padding:8px;
  76. font-family:sans-serif;
  77. font-size:95%; /*since sans-serif seems bigger*/
  78. color:#000;
  79. font-style:normal;
  80. font-weight:normal;
  81. text-decoration:none;
  82. text-align:left;
  83. }
  84.  
  85. /*********************************/
  86. /*** 2.0: Block-Level Elements ***/
  87. /*********************************/
  88.  
  89. p, ul, ol, dl, pre { margin:1em 0; }
  90. p:first-child, blockquote:first-child, ul:first-child, ol:first-child, dl:first-child, pre:first-child { margin-top:0; }
  91. p:last-child, blockquote:last-child, ul:last-child, ol:last-child, dl:last-child, pre:last-child { margin-bottom:0; }
  92.  
  93. pre {
  94. font-family:"Envy Code R", "Consolas", "DejaVu Sans Mono", "Anonymous Pro", "Courier New", monospace;
  95. }
  96.  
  97. blockquote {
  98. margin:1em 1.25em;
  99. quotes:none;
  100. }
  101. blockquote:before, blockquote:after { content:""; }
  102. blockquote::before, blockquote::after { content:""; }
  103.  
  104. address { font-style:normal; }
  105.  
  106. center { text-align:center; }
  107.  
  108. /*** 2.1: Headers ***/
  109.  
  110. h1, h2, h3, h4, h5, h6 {
  111. margin:1em 0;
  112. font-weight:bold;
  113. }
  114. h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top:0; }
  115. h1 {
  116. font-size:2em;
  117. margin-bottom:0.5em;
  118. }
  119. h2 {
  120. font-size:1.7em;
  121. margin-bottom:0.59em;
  122. }
  123. h3 {
  124. font-size:1.4em;
  125. margin-bottom:0.71em;
  126. }
  127. h4, h5, h6 {
  128. font-size:1em;
  129. }
  130.  
  131. hr {
  132. margin:0.5em 0; /*no way to get rid of the margin in IE, so I'll include it for consistency*/
  133. border-width:2px;
  134. padding-top:1px;
  135. border-style:solid;
  136. border-color:#EAEAEA #BBB #676767 #EAEAEA;
  137. background-color:#BBB;
  138. color:#BBB; /*for IE*/
  139. }
  140.  
  141. /*** 2.2: Lists ***/
  142.  
  143. ul { list-style-type:disc; }
  144. ul ul { list-style-type:circle; }
  145. ul ul ul { list-style-type:square; }
  146.  
  147. ul, ol, dir {
  148. padding-left:1.25em;
  149. list-style-position:outside;
  150. }
  151. ol { padding-left:2em; }
  152. menu { list-style-type:none; }
  153.  
  154. dt { margin-top:0.5em; }
  155. dt:first-child { margin-top:0; }
  156. dd { margin-left:1.25em; }
  157.  
  158. /*** 2.3: Tables ***/
  159.  
  160. table {
  161. border-collapse:collapse;
  162. border-spacing:0;
  163. }
  164. caption {
  165. caption-side:top;
  166. text-align:center;
  167. }
  168. td { vertical-align:top; }
  169.  
  170. /****************************/
  171. /*** 3.0: Inline Elements ***/
  172. /****************************/
  173.  
  174. em, i, cite, var, dfn, ins { font-style:italic; }
  175. strong, b { font-weight:bold; }
  176. code, kbd, samp, tt, var {
  177. font-family:"Envy Code R", "Consolas", "DejaVu Sans Mono", "Anonymous Pro", "Courier New", monospace;
  178. }
  179. code, var { background-color:#E6E6E6; }
  180. samp { color:#444; }
  181. del, strike, s { text-decoration:line-through; }
  182. u { text-decoration:underline; }
  183.  
  184. /*Except for IE, browsers automatically add quotes around a `q` element; this removes them.*/
  185. q:before, q:after { content:""; }
  186. q::before, q::after { content:""; }
  187.  
  188. big { font-size:120%; } /*why isn't this deprecated?*/
  189. small, sup, sub { font-size:80%; }
  190.  
  191. sup { vertical-align:super; }
  192. sub { vertical-align:sub; }
  193.  
  194. /*** 3.1: Hyperlinks ***/
  195.  
  196. a img { border:0; }
  197.  
  198. /*
  199. Browsers seem to ignore the implicit pseudo-classes for anchors in terms of specificity; you can override
  200.  them all at once with the selector `a` even though they are more specific. This is corrected when set explicity,
  201.  as below.
  202. Note, however, that these will now be more tedious to override in other stylesheets.
  203. */
  204. a:link {
  205. text-decoration:underline;
  206. color:#00E;
  207. }
  208. a:visited { color:#551A8B; }
  209. a:focus { }
  210. /*I don't use `a` elements as anchors (why would you?), so I won't make these selectors so specific*/
  211. /*a:link:hover { }
  212. a:link:active { color:#F00; }*/
  213. a:hover { }
  214. a:active { color:#F00; }
  215.  
  216. /******************/
  217. /*** 4.0: Forms ***/
  218. /******************/
  219.  
  220. fieldset {
  221. display:block;
  222. padding:0.5em;
  223. border:1px solid #BBB; /*note: setting a border removes IE's curved corners*/
  224. }
  225. legend {
  226. padding-left:3px;
  227. padding-right:3px;
  228. }
  229.  
  230. isindex {
  231. display:block;
  232. position:static;
  233. }
  234.  
  235. input, button, select { vertical-align:middle; }
  236. select[size], select[multiple], textarea { vertical-align:text-top; }
  237.  
  238. input[type="file"] {
  239. }
  240.  
  241. /*** 4.1: Buttons ***/
  242.  
  243. input[type="submit"], input[type="reset"], input[type="button"],
  244. button {
  245. }
  246. input[type="image"] {
  247. }
  248.  
  249. /*** 4.2: Text Inputs ***/
  250.  
  251. input[type="text"], input[type="password"] {
  252. }
  253. textarea {
  254. overflow:auto;
  255. }
  256.  
  257. /*** 4.3: Choices ***/
  258.  
  259. input[type="checkbox"], input[type="radio"] {
  260. }
  261.  
  262. select {
  263. }
  264. optgroup {
  265. font-weight:bold;
  266. font-style:italic;
  267. }
  268. optgroup option {
  269. font-weight:normal;
  270. font-style:normal;
  271. padding-left:1em;
  272. }
  273. option {
  274. padding-right:0.75em; /*for Firefox*/
  275. }
  276. option[disabled] {
  277. color:#999;
  278. }
  279.  
  280. /***************************/
  281. /*** 5.0: Media-Specific ***/
  282. /***************************/
  283. /*audio, aural (deprecated), braille, embossed, handheld, print, projection, screen, speech, tty, tv*/
  284.  
  285. @media aural, braille, embossed, speech, tty {
  286.  
  287. /*img { content:attr(alt); } /*this is what's implied for relevant media, correct?*/
  288. img[alt=""] { display:none; }
  289. img:not([alt]) { display:none; }
  290.  
  291. }
  292.  
  293. @media handheld {
  294.  
  295. *, *:before, *:after { float:none !important; }
  296. *, *::before, *::after { float:none !important; }
  297.  
  298. body {
  299. padding:2px;
  300. font-size:100%;
  301. }
  302.  
  303. pre { white-space:pre-wrap; }
  304.  
  305. blockquote { margin:1em 0 1em 1em; }
  306.  
  307. dd { margin-left:1em; }
  308.  
  309. h1 { margin-top:0.5em; }
  310. h2 { margin-top:0.59em; }
  311. h3 { margin-top:0.71em; }
  312.  
  313. ul, ol {
  314. padding-left:0;
  315. list-style-position:inside;
  316. }
  317.  
  318. img { max-width:100%; }
  319.  
  320. }
  321.  
  322. @media tv {
  323. }
  324.  
  325. /*** 5.1: Paged Media ***/
  326.  
  327. @media embossed, print, projection, tv {
  328.  
  329. * {
  330. page-break-before:auto;
  331. page-break-inside:auto;
  332. page-break-after:auto;
  333. }
  334.  
  335. p, blockquote, li, dd, pre, h1, h2, h3, h4, h5, h6 {
  336. orphans:2;
  337. widows:2;
  338. }
  339. h1, h2, h3, h4, h5, h6 { page-break-after:avoid; }
  340. dt { page-break-after:avoid; }
  341. dd { page-break-before:avoid; }
  342. table, address, a { page-break-inside:avoid; }
  343.  
  344. }
  345.  
  346. @media embossed, print {
  347.  
  348. body { padding:0; }
  349. a { text-decoration:none; } /*consider making sure it is still distinguishable on a B&W printer or to a color-blind user*/
  350.  
  351. }
  352.  
  353. @media print {
  354.  
  355. html { background-color:transparent; }
  356. body {
  357. font-size:11pt;
  358. font-family:"Times New Roman", Times, serif;
  359. }
  360. pre, code, kbd, samp, tt, var {
  361. font-family:"Envy Code R", "Consolas", "DejaVu Sans Mono", "Anonymous Pro", "Courier New", monospace;
  362. }
  363.  
  364. a:visited { color:#00E; }
  365. a[href^="#"] { color:inherit; }
  366.  
  367. }
  368.  
  369. /*** 5.2: Audible Media ***/
  370.  
  371. @media aural { /*deprecated*/
  372.  
  373. * {
  374. /*pause-before:0;
  375. pause-after:0;
  376. cue-before:none;
  377. cue-after:none;
  378. play-during:auto;*/
  379. }
  380. html { play-during:none; }
  381. body {
  382. voice-family:male;
  383. /*speak:normal;
  384. speak-punctuation:none;
  385. speak-numeral:continuous;
  386. volume:medium;
  387. speech-rate:medium;
  388. pitch:medium;
  389. pitch-range:50;
  390. stress:50;
  391. richness:50;
  392. azimuth:center;
  393. elevation:level;*/
  394. }
  395.  
  396. th, td { /*speak-header:once;*/ }
  397.  
  398. small { volume:soft; }
  399.  
  400. }
  401.  
  402. @media speech {
  403.  
  404. * {
  405. /*voice-duration:;
  406. phonemes:;
  407. pause-before:;
  408. pause-after:;
  409. cue-before:none;
  410. cue-after:none;
  411. rest-before:;
  412. rest-after:;
  413. mark-before:none;
  414. mark-after:none;*/
  415. }
  416. body {
  417. voice-family:male;
  418. /*voice-volume:medium;
  419. voice-balance:center;
  420. speak:normal;
  421. voice-rate:;
  422. voice-pitch:medium;
  423. voice-pitch-range:;
  424. voice-stress:moderate;*/
  425. }
  426.  
  427. small { voice-volume:soft; }
  428.  
  429. }
  430.  
  431. @media audio {
  432. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wizard04 on December 10, 2009

Small updates for big, small, sup, and sub elements; added font-size:inherit to the third rule.

Posted By: wizard04 on April 16, 2014

The latest: https://gist.github.com/wizard04wsu/9080346

You need to login to post a comment.