DzR Master Stylesheet (Part I, Reset)


/ Published in: CSS
Save to your folder(s)

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)")


Copy this code and paste it in your HTML
  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

You need to login to post a comment.