What is Reset.CSS?
Reset.CSS is simply a collection of CSS styles which removes and neutralizes the inconsistent default styling of HTML elements.
By using Reset.CSS, you simply clear the default values of web browsers and you wont need to alter these differences for every element again.
There are 2 popular Reset.CSS styles:
Now, Eric's version:
Every of us have different needs and approach. So i think every serious CSS coder should have CSS-reset system, written by himself. Hope this will help you guys who are new with css.
There are 2 popular Reset.CSS styles:
- YUI Reset CSS
- Eric meyer Reset CSS
abbr,acronym {
border:0;
}
address,cite,code,dfn,em,strong,var {
font-style:normal;
font-weight:normal;
}
blockquote {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
}
caption {
font-style:normal;
font-weight:normal;
text-align:left;
}
fieldset {
margin:0;
padding:0;
border:0;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
font-size:100%;
font-weight:normal;
}
img {
border:0;
}
ol,ul {
margin:0;
padding:0;
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
td {
margin:0;
padding:0;
}
th {
margin:0;
padding:0;
font-style:normal;
font-weight:normal;
text-align:left;
}
q:before,q:after {
content:'';
}
div,dl,dt,dd,li,pre,form,p {
margin:0;
padding:0;
}
/*
* THESE ARE ONLY DEFINED IN YAHOO VERSION
*/
input,textarea {
margin:0;
padding:0
} Now, Eric's version:
abbr, acronym {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
address,cite,code,dfn,em,strong,var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
blockquote {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
quotes: "" "";
}
body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
line-height: 1;
color: black;
background: white;
}
caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
img {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
ol, ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
border-collapse: collapse;
border-spacing: 0;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
th {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
q:before, q:after {
content: "";
}
div,dl,dt,dd,li,pre,form, p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
/* THESE STYLE ONLY EXIST IN MEYER'S VERSION */
/* remember to define focus styles! */
:focus {
outline: 0;
}
blockquote:before, blockquote:after {
content: "";
}
html, applet, object, span, iframe, a, big,
del, font, ins, kbd, s, samp,
small, strike, sub, sup, tt,
label, legend,
tbody, tfoot, thead, tr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
q {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
quotes: "" "";
} Every of us have different needs and approach. So i think every serious CSS coder should have CSS-reset system, written by himself. Hope this will help you guys who are new with css.
Online Javascript Course | Backbone.JS Online Course | KnockoutJS Online Training | Angularjs Online Course | Bootstrap Online Training | Node js Online Course | Typescript Online Training
ReplyDelete