{"id":2532,"date":"2016-10-24T21:31:53","date_gmt":"2016-10-24T16:01:53","guid":{"rendered":"http:\/\/codetheory.in\/?p=2532"},"modified":"2016-10-24T21:31:53","modified_gmt":"2016-10-24T16:01:53","slug":"a-guide-to-css-resets","status":"publish","type":"post","link":"https:\/\/codetheory.in\/a-guide-to-css-resets\/","title":{"rendered":"A Guide to CSS Resets"},"content":{"rendered":"

CSS resets are a great tool that can be used to essentially reset some (or all, depending on the reset you use) of a particular browser’s default styling. Developers use resets to help ensure cross-browser compatibility, and to make it easier to style their HTML elements\u00a0to match\u00a0their design specs exactly\u00a0<\/em>without any default browser styling getting in the way. As a developer, you can choose to create your own custom reset or use one of the common reset snippets to reset browser styling. You can also modify any reset snippets you find to suit the needs of your projects.<\/p>\n

The Universal Reset<\/h3>\n

This might be the simplest CSS rest of them all. The universal reset is used to set the margin and padding of\u00a0every<\/em> HTML element to zero. To use the reset, simply add this code to the top of your stylesheets:<\/p>\n

*{\r\nmargin: 0;\r\npadding: 0;\r\n}<\/pre>\n
You’ll often see other properties added to this reset as well, like border: 0 and outline: 0, for example, but feel free too add any property you like. Just be very conscious of the fact that any property used with the * selector will be applied to\u00a0all<\/em> your HTML elements.<\/p>\n
Eric Meyer’s CSS Reset<\/h3>\n
This is another common reset snippet<\/a>\u00a0that aims to eliminate browser inconsistencies. It’s inclusive of many different (but not all) HTML elements and resets margins, padding, and border values to 0, while also setting alignment to baseline. It also includes resetting rules for blockquotes. See the snippet below:<\/p>\n
\/* http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/ \r\n   v2.0 | 20110126\r\n   License: none (public domain)\r\n*\/\r\n\r\nhtml, body, div, span, applet, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\na, abbr, acronym, address, big, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, s, samp,\r\nsmall, strike, strong, sub, sup, tt, var,\r\nb, u, i, center,\r\ndl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend,\r\ntable, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, embed, \r\nfigure, figcaption, footer, header, hgroup, \r\nmenu, nav, output, ruby, section, summary,\r\ntime, mark, audio, video {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tborder: 0;\r\n\tfont-size: 100%;\r\n\tfont: inherit;\r\n\tvertical-align: baseline;\r\n}\r\n\/* HTML5 display-role reset for older browsers *\/\r\narticle, aside, details, figcaption, figure, \r\nfooter, header, hgroup, menu, nav, section {\r\n\tdisplay: block;\r\n}\r\nbody {\r\n\tline-height: 1;\r\n}\r\nol, ul {\r\n\tlist-style: none;\r\n}\r\nblockquote, q {\r\n\tquotes: none;\r\n}\r\nblockquote:before, blockquote:after,\r\nq:before, q:after {\r\n\tcontent: '';\r\n\tcontent: none;\r\n}\r\ntable {\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n}<\/pre>\n
HTML5 Doctor’s Reset<\/h3>\n
The HTML5 Doctor’s Reset<\/a> is essentially just a modified version of Eric Meyer’s reset, and was modified specifically with HTML5 and the HTML5 boilerplate template in mind. It includes specific resets for many more HTML elements than the Meyer reset, including input, table, hr, and a. This reset is a lot more in-depth than the other two and goes beyond just resetting the default — for many elements it creates a new, almost themed default setting.\u00a0See the snippet below:<\/p>\n
\/* \r\nhtml5doctor.com Reset Stylesheet\r\nv1.6.1\r\nLast Updated: 2010-09-17\r\nAuthor: Richard Clark - http:\/\/richclarkdesign.com \r\nTwitter: @rich_clark\r\n*\/\r\n\r\nhtml, body, div, span, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\nabbr, address, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, samp,\r\nsmall, strong, sub, sup, var,\r\nb, i,\r\ndl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend,\r\ntable, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, figcaption, figure, \r\nfooter, header, hgroup, menu, nav, section, summary,\r\ntime, mark, audio, video {\r\n margin:0;\r\n padding:0;\r\n border:0;\r\n outline:0;\r\n font-size:100%;\r\n vertical-align:baseline;\r\n background:transparent;\r\n}\r\n\r\nbody {\r\n line-height:1;\r\n}\r\n\r\narticle,aside,details,figcaption,figure,\r\nfooter,header,hgroup,menu,nav,section { \r\n display:block;\r\n}\r\n\r\nnav ul {\r\n list-style:none;\r\n}\r\n\r\nblockquote, q {\r\n quotes:none;\r\n}\r\n\r\nblockquote:before, blockquote:after,\r\nq:before, q:after {\r\n content:'';\r\n content:none;\r\n}\r\n\r\na {\r\n margin:0;\r\n padding:0;\r\n font-size:100%;\r\n vertical-align:baseline;\r\n background:transparent;\r\n}\r\n\r\n\/* change colours to suit your needs *\/\r\nins {\r\n background-color:#ff9;\r\n color:#000;\r\n text-decoration:none;\r\n}\r\n\r\n\/* change colours to suit your needs *\/\r\nmark {\r\n background-color:#ff9;\r\n color:#000; \r\n font-style:italic;\r\n font-weight:bold;\r\n}\r\n\r\ndel {\r\n text-decoration: line-through;\r\n}\r\n\r\nabbr[title], dfn[title] {\r\n border-bottom:1px dotted;\r\n cursor:help;\r\n}\r\n\r\ntable {\r\n border-collapse:collapse;\r\n border-spacing:0;\r\n}\r\n\r\n\/* change border colour to suit your needs *\/\r\nhr {\r\n display:block;\r\n height:1px;\r\n border:0; \r\n border-top:1px solid #cccccc;\r\n margin:1em 0;\r\n padding:0;\r\n}\r\n\r\ninput, select {\r\n vertical-align:middle;\r\n}<\/pre>\n
Conclusion<\/h3>\n
Resets can be a great tool to ensure cross-browser compatibility, to get rid of inconsistencies between browsers, and to determine new, custom default styling for your projects. However, resets can be a powerful tool — sometimes too powerful. If you’re not careful, your resets can end up changing the styling of something that you might not have wanted to alter (this is particularly true with the universal reset), so use them with caution.<\/p>\n
Lastly, don’t forget that you can modify\u00a0any rest snippet you like to reflect the needs of your project. The resets are open-source, so don’t be afraid to make changes. And if none of the resets above are really working for you, you can always write your own!<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
CSS resets are a great tool that can be used to essentially reset some (or all, depending on the reset you use) of a particular browser’s default styling. Developers use resets to help ensure cross-browser compatibility, and to make it easier to style their HTML elements\u00a0to match\u00a0their design specs exactly\u00a0without any default browser styling getting … Continue reading “A Guide to CSS Resets”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/2532"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=2532"}],"version-history":[{"count":2,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/2532\/revisions"}],"predecessor-version":[{"id":2534,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/2532\/revisions\/2534"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=2532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=2532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=2532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}