reset.css StyleSheet

Posted on Friday April 27, 2012 / by Eric Potvin

What Resetting your styles or Reset CSS means?

It is simply a way to reset the styles of all elements to a default value to avoid cross-browser issues. Not all the Internet browsers use the same styling defaults for margins, paddings, line-heights, and other attributes for examples.

For example, in Firefox, you can see a space between divs and paragraphs. These spaces will might be different in Internet Explorer or Chrome. Obviously, you cannot force someone to use a specific browser. Therefore, by reseting HTML elements will fix this issue.

The solution is simple, simply add this CSS code to your website.

reset.css

::-moz-selection {
  background: #333;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #333;
  color: #fff;
  text-shadow: none;
}
::-moz-focus-inner, :focus {
  outline: none;
}
* {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  font: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  vertical-align: baseline;
}
a {
  cursor: pointer;
  text-decoration: none;
}
a img {
	border: none;
}
/* HTML5 new elements for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
}
body, html {
  height: 100%;
}
caption, th {
	text-align: left;
}
del {
    text-decoration: line-through;
}
fieldset {
	border: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img {
  border: 0;
}
img::-moz-selection, img::selection {
  background: transparent;
}
input, select, textarea {
  border: solid 1px #aaa;
  margin: 3px;
  padding: 2px;
}
kbd {
  background: #eee;
  border-color: #ccc #aaa #888 #bbb;
  border-style: solid;
  border-width: 1px 3px 3px 1px;
  color: #000;
  padding: 2px 4px;
  white-space: nowrap;
}
mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Oh and by the way, this is not a rock solid, signed by any attorney, do not modify kind of CSS. You can course change all these values the way you like