Advanced Search

html5 reset css

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2.  
  3. Markus Török
  4. toeroek.eu
  5.  
  6. RESET.CSS
  7.  
  8. */
  9.  
  10. /* 
  11.   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  12.   v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  13.   html5doctor.com/html-5-reset-stylesheet/
  14. */
  15.  
  16. html, body, div, span, object, iframe,
  17. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  18. abbr, address, cite, code,
  19. del, dfn, em, img, ins, kbd, q, samp,
  20. small, strong, sub, sup, var,
  21. b, i,
  22. dl, dt, dd, ol, ul, li,
  23. fieldset, form, label, legend,
  24. table, caption, tbody, tfoot, thead, tr, th, td,
  25. article, aside, canvas, details, figcaption, figure, 
  26. footer, header, hgroup, menu, nav, section, summary,
  27. time, mark, audio, video {
  28.   margin:0;
  29.   padding:0;
  30.   border:0;
  31.   outline:0;
  32.   font-size:100%;
  33.   vertical-align:baseline;
  34.   background:transparent;
  35. }                  
  36.  
  37. article, aside, details, figcaption, figure,
  38. footer, header, hgroup, menu, nav, section { 
  39.     display:block;
  40. }
  41.  
  42. nav ul { list-style:none; }
  43.  
  44. blockquote, q { quotes:none; }
  45.  
  46. blockquote:before, blockquote:after,
  47. q:before, q:after { content:''; content:none; }
  48.  
  49. a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
  50.  
  51. ins { background-color:#ff9; color:#000; text-decoration:none; }
  52.  
  53. mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
  54.  
  55. del { text-decoration: line-through; }
  56.  
  57. abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
  58.  
  59. /* tables still need cellspacing="0" in the markup */
  60. table { border-collapse:collapse; border-spacing:0; }
  61.  
  62. hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
  63.  
  64. input, select { vertical-align:middle; }
  65.  
  66. select, input, textarea, button { font:99% serif; }
  67.  
  68. pre, code, kbd, samp { font-family: monospace, serif; }
  69.  
  70. html { overflow-y: scroll; }
  71.  
  72.  
  73.  
  74.  
  75. ul, ol { margin-left: 1.8em; }
  76. ol { list-style-type: decimal; }
  77.  
  78. /* Remove margins for navigation lists */
  79. nav ul, nav li { margin: 0; } 
  80.  
  81. small { font-size: 85%; }
  82. strong, th { font-weight: bold; }
  83.  
  84. td, td img { vertical-align: top; } 
  85.  
  86. sub { vertical-align: sub; font-size: smaller; }
  87. sup { vertical-align: super; font-size: smaller; }
  88.  
  89. pre { 
  90.   padding: 15px;
  91.   white-space: pre; /* CSS2 */
  92.   white-space: pre-wrap; /* CSS 2.1 */
  93.   white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  94.   word-wrap: break-word; /* IE */
  95. }
  96.  
  97. textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
  98.  
  99. .ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
  100.  
  101. /* align checkboxes, radios, text inputs with their label
  102.    by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
  103. input[type="radio"] { vertical-align: text-bottom; }
  104. input[type="checkbox"] { vertical-align: bottom; }
  105. .ie7 input[type="checkbox"] { vertical-align: baseline; }
  106. .ie6 input { vertical-align: text-bottom; }
  107.  
  108. /* hand cursor on clickable input elements */
  109. label, input[type=button], input[type=submit], button { cursor: pointer; }
  110.  
  111. /* webkit browsers add a 2px margin outside the chrome of form elements */  
  112. button, input, select, textarea { margin: 0; }
  113.  
  114. /* colors for form validity */
  115. input:valid, textarea:valid   {  }
  116. input:invalid, textarea:invalid { 
  117.       border-radius: 1px;
  118.     -moz-box-shadow: 0px 0px 5px red; 
  119.  -webkit-box-shadow: 0px 0px 5px red; 
  120.          box-shadow: 0px 0px 5px red;
  121. }
  122. .no-boxshadow input:invalid, 
  123. .no-boxshadow textarea:invalid { background-color: #f0dddd; }
  124.  
  125.  
  126. /* These selection declarations have to be separate.
  127.    No text-shadow: twitter.com/miketaylr/status/12228805301 
  128.    Also: hot pink. */
  129. ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
  130. ::selection { background:#FF5E99; color:#fff; text-shadow: none; } 
  131.  
  132. /*  j.mp/webkit-tap-highlight-color */
  133. a:link { -webkit-tap-highlight-color: #FF5E99; } 
  134.  
  135. /* make buttons play nice in IE:    
  136.    www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
  137. button {  width: auto; overflow: visible; }
  138.  
  139. /* bicubic resizing for non-native sized IMG: 
  140.    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
  141. .ie7 img { -ms-interpolation-mode: bicubic; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.