CSS - Overriding CSS Reset

Question

Problem: margin: 0 auto does not work on body. background-color: #EEEEEE on the other hand, is working even though they are on the same block.

index.php:

<html>

    <head>
        <title>MForte</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css">
    </head>

    <body id="container">
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </body>

</html>

reset.css:

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
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;
}

bodyStyleSheet.css:

#container {
    margin: 0 auto;
    background-color: #EEEEEE;
}

What I have tried:

1) Swapping <link rel="stylesheet" type="text/css" href="css/reset.css"> and <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css"> to each other.

2) Removed the id of the body from the index.php file and replaced the #container by body

3) To test the scenario, since border: 0 is declared on reset.css, I tried to create a table on index.php containing 2 rows. border: 1 is declared on reset.css in the table tag. Border didn't show.

You've done nothing to stop body from simply taking up the entire width allowable, so that's why margin: 0 auto; won't do anything. First fix the width of body so that it is not as wide as html, and you will see the margin doing something. — Ming
– Ming, Commented Dec 19, 2013 at 6:42

Mr. Alien · Accepted Answer · 2013-12-19 06:48:22Z

4

Your approach is wrong, you are trying to horizontally center body element which has a default width of 100% so even if you want to horizontally center the body you cannot, as it is 100% in width and actually designers never center the body tag.. so if you want, nest a container div inside the body element, assign some fixed width and than use margin: 0 auto;. So alter your DOM like

<body>
   <div id="container">
   </div>
</body>

#container {
   width: 1000px;
   margin: 0 auto;
}

Also, if you are looking to apply background to entire viewport than leave the background property on the body element, if you want the background only for the horizontally centered element than move the background property in #container

Also, CSS reset has nothing to do with this, CSS Reset is used to reset the default styles applied by browser stylesheet, some prefer to use universal * selector to reset margin and padding and some do reset the outline as well like

* {
   margin: 0;
   padding: 0;
   outline: 0;
}

But some prefer CSS Reset Stylesheets which minimizes cross browser differences to minimal.. So you can opt for any option.

Last but not the least, you are talking about the overriding, using Reset stylesheet, those stylesheet always uses minimal specificity selectors, using class or id will make your selectors anyways specific than the selectors used in the Reset Stylesheet, so don't use !important unless required unless you will end up in a mess, better use specific selectors.

edited Dec 19, 2013 at 6:48

answered Dec 19, 2013 at 6:41

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael 'Maik' Ardan Over a year ago

Hi Mr. Alien, thanks for a fast response. Setting a fixed width to the body resolved my problem. Also, thank you for pointing some other important factors. One last question, I also tried to create a table settings the border size on table {} at reset.css but didn't show upon rendering. What could possible go wrong with that?

Mr. Alien Over a year ago

@MichaelArdan Edited my answer, and don't use fixed width on body, consider using a container element instead

Oliver M Grech · Accepted Answer · 2013-12-19 06:42:38Z

0

Use !important in css/bodyStyleSheet.css

such as

#container {
    margin: 0 auto;
    background-color: #EEEEEE !important;
}

Good article on Smashing Magazine here

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

answered Dec 19, 2013 at 6:42

Oliver M Grech

3,2091 gold badge26 silver badges39 bronze badges

5 Comments

Mr. Alien Over a year ago

Why use !important?

Michael 'Maik' Ardan Over a year ago

I'm very sorry for not including the use if !important in the question even though I was able to try it. But thank you for your time. + for this. This could be useful to other viewers.

Oliver M Grech Over a year ago

!important overrides the previous css declarationof a dom object and also elevates the scope strength. If I remember correctly (someone correct me about this), if used in a css file it can override inline css as well.

Oliver M Grech Over a year ago

Thanks a lot Michael, Agreed with you :)

goonerify Over a year ago

This approach is not sustainable. You'd have a whole lot of !important until the point where it's hard to track what's going on

Collectives™ on Stack Overflow

CSS - Overriding CSS Reset

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related