Meyerweb CSS Reset

Meyerweb CSS Reset
0

#1

Hi all,

I’ve been learning a little bit about resets to abolish all default settings the browser applies. I used a border on all elements to see the difference which I found pretty intriguing- Fascinating to see exactly how things are being displayed/interpreted with boxes visible.
I was wondering if anyone has any idea what the browser is actually adding (I used Chrome).
I’ve pasted some code below and the results both before and after using a reset. Does anyone understand what exactly is happening when the reset isn’t applied and why there appear to be a number more boxes?
And also is it good practice just to always use a reset so that you are completely controlling all the elements when you’re building?
Thanks.

Positioning Content

Test

BEFORE reset

AFTER reset


#2

Where is the code? :sunny:


#3

Oops… Here it is. (It’s just a basic set up):

<!DOCTYPE html>
<html>
<head>
	<title>Positioning</title>
	<link rel="stylesheet" href="css/stylesheet2.css">
</head>
<body>
<p>Test</p>
</body>
</html>

#4

We need to see the contents of stylesheet2.css, which contains the CSS code.applied to the html elements.


#5

You can tell I’m new at this, lol. Code below:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 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;
}
/* 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;
}


#6

I don’t know what page you were viewing where you show the red borders/boxes around the text, but the code (html and css) does not do that. You stated you used a border on all elements to see the difference, but I do not see any CSS posted where you are applying a red border.


#7

I used the code to show all the borders:

*  { 
    border: red solid 1px !important;
}

#8

When you write the following:

<html>
<head>
	<title>Positioning</title>
  <style> 
  * {
  border: red solid 1px !important;
  }
  </style>
</head>
<body>
  <p>Test</p>
</body>
</html>

it is like writing the following:

<html>
<head>
	<title>Positioning</title>
  <style> 
  html, body, p {
  border: red solid 1px !important;
  }
  </style>
</head>
<body>
  <p>Test</p>
</body>
</html>

The * represents all elements, so each element (html, body, and p) would all have red borders, so that is why there are 3 boxes. When you apply the reset CSS, certain elements which would normally have padding or margin built into them, no longer do, so it appears as just one red border. You will notice in that first large collection of elements defined by the selector, the following is applied:

{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

If you remove the margin: 0; and the padding: 0; you would see the 3 boxes again.


#9

Totally makes sense. So helpful to understand how each browser sets its own defaults that you can over-ride. Is this generally good practice to reset or should I just leave to the browsers default settings?


#10

There are varying opinions on this subject. In the earlier days of the web, browsers were less conforming to standards (Internet Explorer was the biggest culprit) and so resetting the CSS definitively took the surprise out of working with different browsers.

I personally do not use resets, because since in a large project, you will potentially be defining these same element selectors again later in your CSS. It seems redundant and inefficient to me.

I found an interesting article on CSS resets. It was written in 2010, so you will have to take it with a grain of salt.


#11

Thanks @RandellDawson, I’ll have a read.