Danelo Danelo - 1 year ago 72
CSS Question

eric meyer's css reset affecting headings

I am using Eric Meyer's css reset 2. But when using a heading in my website, the headings are all same size and small text. I have seen that the problem comes from css reset. I tried remove the headings from there, but now they seem to have a padding from top. Here is a fiddle example: jsfiddle.net/50c9dsyu/.

h1 {
color: gray; }
/* 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;

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="sass\main.css" rel="stylesheet"/>
<link href="css\reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h1>I like pizza</h1>

Answer Source

As pointed out in the comments, this is the expected behavior of any CSS reset. Any CSS you add needs to be below the reset rules. I have updated your fiddle.

/* Reset code goes here */

.myRule { 
    color: red;


Note the rule for the H1 is now at the bottom of the CSS.