Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS reset. Follow me on the twitters for more tips: https://twitter.com/davidwells
/* http://meyerweb.com/eric/tools/css/reset/
v2.0-modified | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* make sure to set some focus styles for accessibility */
:focus {
outline: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
-moz-appearance: none;
}
input[type=search] {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
max-width: 100%;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
html,
button,
input,
select,
textarea {
color: #222;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
@leandroruel

This comment has been minimized.

Copy link

@leandroruel leandroruel commented Aug 31, 2018

is it updated?

@ptaberg

This comment has been minimized.

Copy link

@ptaberg ptaberg commented Nov 13, 2018

tnx for prefixes

@lkraman

This comment has been minimized.

Copy link

@lkraman lkraman commented Mar 3, 2019

Thanks!

@jinfull

This comment has been minimized.

Copy link

@jinfull jinfull commented May 2, 2019

thx

@terluk

This comment has been minimized.

Copy link

@terluk terluk commented May 15, 2019

Great job, thanks.

@VasylBakanovskyi

This comment has been minimized.

Copy link

@VasylBakanovskyi VasylBakanovskyi commented May 20, 2019

Thanks

@doankhue

This comment has been minimized.

Copy link

@doankhue doankhue commented May 21, 2019

Thanks

@hessaam

This comment has been minimized.

Copy link

@hessaam hessaam commented May 30, 2019

Thanks

@david-fox-chang

This comment has been minimized.

Copy link

@david-fox-chang david-fox-chang commented Jun 14, 2019

Thanks

@dimitriaguera

This comment has been minimized.

Copy link

@dimitriaguera dimitriaguera commented Jun 22, 2019

Thanks !

@ERPedersen

This comment has been minimized.

Copy link

@ERPedersen ERPedersen commented Jun 27, 2019

Thx bruv

@XXonline

This comment has been minimized.

Copy link

@XXonline XXonline commented Jun 28, 2019

thanks!

@blackrama

This comment has been minimized.

Copy link

@blackrama blackrama commented Jul 8, 2019

thanks!

@shijiatongxue

This comment has been minimized.

Copy link

@shijiatongxue shijiatongxue commented Jul 12, 2019

Respect

@groupunknown

This comment has been minimized.

Copy link

@groupunknown groupunknown commented Jul 17, 2019

I usually use the code below to adjust the border with the div, I do not know if it's a good practice, but it works perfectly for me.

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box
}

could add to the reset, or not, as I said, I do not know if a good practice to use this.

@k2k-com

This comment has been minimized.

Copy link

@k2k-com k2k-com commented Aug 9, 2019

спасибо

@Hak-I-Seup

This comment has been minimized.

Copy link

@Hak-I-Seup Hak-I-Seup commented Aug 11, 2019

You would be a good man! Ggam ssoa hap ni da ^|^

@lucasaloha10

This comment has been minimized.

Copy link

@lucasaloha10 lucasaloha10 commented Aug 13, 2019

how to overwrite my css before reset?

@vasex-xena

This comment has been minimized.

Copy link

@vasex-xena vasex-xena commented Aug 14, 2019

Thanks

@mezus-xd

This comment has been minimized.

Copy link

@mezus-xd mezus-xd commented Aug 26, 2019

thanks, i used this now

*, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; image-rendering: -webkit-optimize-contrast;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; -webkit-text-size-adjust: 100%;}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ul, ol{list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; }
input:not([type='radio']):not([type='checkbox']), textarea, select{-webkit-appearance: none;}
mark {background-color: transparent;font-weight: bold;color: inherit;}
/* end reset */

/preset/
body{font-size: 17px; line-height: 27.92px; font-family: Helvetica, sans-serif; color:#1a1a1a;}

.clearfix:before, .clearfix:after { content:""; display: table; clear: both; }
.clearfix {clear: both; overflow: hidden;}
.wrapper{max-width: 1080px;margin: 0 auto;width: 100%;position: relative;}

and for my html

https://github.com/mezus-xd/Wordpress-Snippets-by-Mezus/blob/master/save

@DevEvKa

This comment has been minimized.

Copy link

@DevEvKa DevEvKa commented Sep 22, 2019

Thank you! It helps a lot :)

@Epic-R-R

This comment has been minimized.

Copy link

@Epic-R-R Epic-R-R commented Oct 10, 2019

Thanks

@HuiruDong

This comment has been minimized.

Copy link

@HuiruDong HuiruDong commented Oct 16, 2019

Thanks :)

@KeynesYouDigIt

This comment has been minimized.

Copy link

@KeynesYouDigIt KeynesYouDigIt commented Oct 24, 2019

beautiful thank you!

@victor-uni-kilo

This comment has been minimized.

Copy link

@victor-uni-kilo victor-uni-kilo commented Oct 25, 2019

Thanks :)

@dada513

This comment has been minimized.

Copy link

@dada513 dada513 commented Oct 26, 2019

how to overwrite my css before reset?

add reset before your main css

@sudhir-pradhan

This comment has been minimized.

Copy link

@sudhir-pradhan sudhir-pradhan commented Oct 30, 2019

how to overwrite my css before reset?

just import reset.css in your index.css.

@import "your_path/reset.css"

/rest of your css continues/

@hyalen

This comment has been minimized.

Copy link

@hyalen hyalen commented Nov 7, 2019

Awesome. Thanks ;)

@shamaru001

This comment has been minimized.

Copy link

@shamaru001 shamaru001 commented Nov 17, 2019

Very nice, thanks.

@BienvenidoBoriko

This comment has been minimized.

Copy link

@BienvenidoBoriko BienvenidoBoriko commented Nov 28, 2019

tanks

@ta-riq

This comment has been minimized.

Copy link

@ta-riq ta-riq commented Dec 3, 2019

Is it still needed inn 2019 ?

@DiegoHilderink

This comment has been minimized.

Copy link

@DiegoHilderink DiegoHilderink commented Dec 10, 2019

Thank you very much

@amirmardani500

This comment has been minimized.

Copy link

@amirmardani500 amirmardani500 commented Dec 16, 2019

?

@cnrblm

This comment has been minimized.

Copy link

@cnrblm cnrblm commented Dec 19, 2019

thanks.

@Yongho-VIRNECT

This comment has been minimized.

Copy link

@Yongho-VIRNECT Yongho-VIRNECT commented Jan 2, 2020

thanks. happy new year 2020~!

@andersonluizneto

This comment has been minimized.

Copy link

@andersonluizneto andersonluizneto commented Jan 19, 2020

Thanks!

@scarpeace

This comment has been minimized.

Copy link

@scarpeace scarpeace commented Jan 21, 2020

Thanks!

@momoduoladapo

This comment has been minimized.

Copy link

@momoduoladapo momoduoladapo commented Jan 23, 2020

Beautiful. Thanks so much and a happy new year

@rvyoges

This comment has been minimized.

Copy link

@rvyoges rvyoges commented Feb 7, 2020

Thanks...

@SeyouElegance

This comment has been minimized.

Copy link

@SeyouElegance SeyouElegance commented Feb 7, 2020

Cheers !!!

@kayrobin

This comment has been minimized.

Copy link

@kayrobin kayrobin commented Feb 8, 2020

Thank you

@AyrtonPereira1996

This comment has been minimized.

Copy link

@AyrtonPereira1996 AyrtonPereira1996 commented Feb 28, 2020

Thanks a lot to you!

@crazzylama0

This comment has been minimized.

Copy link

@crazzylama0 crazzylama0 commented Mar 10, 2020

Thank you a lot!!!

@eyupkayadarcin

This comment has been minimized.

Copy link

@eyupkayadarcin eyupkayadarcin commented Mar 13, 2020

👍

@overparser

This comment has been minimized.

Copy link

@overparser overparser commented Mar 26, 2020

thanks <3

@verhovensky

This comment has been minimized.

Copy link

@verhovensky verhovensky commented Apr 1, 2020

Thank you!

@joaobispo2077

This comment has been minimized.

Copy link

@joaobispo2077 joaobispo2077 commented Apr 10, 2020

Thaanks!

@hamed-farag

This comment has been minimized.

Copy link

@hamed-farag hamed-farag commented Apr 11, 2020

Thanks 🤩

@callmeweirdo

This comment has been minimized.

Copy link

@callmeweirdo callmeweirdo commented Apr 21, 2020

pls.. how do I grab this file from here

@KajaPiechowka

This comment has been minimized.

Copy link

@KajaPiechowka KajaPiechowka commented Apr 21, 2020

pls.. how do I grab this file from here

ctrl + C , ctrl + V

@pyll-o

This comment has been minimized.

Copy link

@pyll-o pyll-o commented Apr 21, 2020

Thanks :)

@sajjadmd

This comment has been minimized.

Copy link

@sajjadmd sajjadmd commented Apr 28, 2020

Thank you so much @DavidWells

@TangoPJ

This comment has been minimized.

Copy link

@TangoPJ TangoPJ commented May 2, 2020

Thank you a lot man))

@RRasputin92

This comment has been minimized.

Copy link

@RRasputin92 RRasputin92 commented May 6, 2020

Благодарю!!!

@mohsen-walton

This comment has been minimized.

Copy link

@mohsen-walton mohsen-walton commented May 6, 2020

thanks man 👍

@bendevs99

This comment has been minimized.

Copy link

@bendevs99 bendevs99 commented May 12, 2020

Thanks!

@zdimaz

This comment has been minimized.

Copy link

@zdimaz zdimaz commented May 20, 2020

why you stant styles some elements
Reset go to reset !importent !!

appearance: none:

Some like :
textarea,
input,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
AND MORE SOME ONE ANOTHER !

@angelazest

This comment has been minimized.

Copy link

@angelazest angelazest commented Jun 20, 2020

Hi David,
Thanks @ lot.
All the best

@10sGerar

This comment has been minimized.

Copy link

@10sGerar 10sGerar commented Jul 2, 2020

Thanks a lot for sharing this!

@wodim

This comment has been minimized.

Copy link

@wodim wodim commented Aug 30, 2020

Minified:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:02px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,htmlinput[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],htmlinput[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html,button,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0}
@ninepark

This comment has been minimized.

Copy link

@ninepark ninepark commented Sep 1, 2020

Thank you :)

@angelazest

This comment has been minimized.

Copy link

@angelazest angelazest commented Sep 1, 2020

Hello David,
Thank you very much,

All the best

@Alex-brooke

This comment has been minimized.

Copy link

@Alex-brooke Alex-brooke commented Sep 19, 2020

Epic! Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.