FAQ: The Box Model - Resetting Defaults

This community-built FAQ covers the “Resetting Defaults” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Resetting Defaults

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

A post was split to a new topic: Can we use { opacity: 0 } instead of visibility?

Is using

*{
margin: 0;
padding: 0;
}

the best way to do this?

I ran this by a friend who works as a front end dev and he suggested using this instead:

Html, body{
margin: 0;
padding: 0;
)

What are some thoughts on this? Are there trade-offs to using one method over the other? Does it essentially do the same thing?

1 Like

Universal selector use comes with a cost. How many HTMLElements are there? Every one of them will be given this rule. This becomes even more expensive in a page that has any CSS or DOM interaction since the page has to be redrawn with every interaction. Sure it’s cool, and looks like a magic pill to apply an instant global solution, but remember the cost. This selector is never cheap.

Write resets on elements that are actually in the document, and forgo the instant solution approach. It will be much less costly in terms of resource use and performance.

3 Likes

Why is the

Conservation Efforts at Lake Tahoe Being Praised by Nation’s Leaders

seem like its the only thing affected by the resetting default? as in why is it the only one which got shifted to the left?

I don’t see a difference.

3 Likes

All the more reason to NOT use reset.css. Until one knows what is being reset, it makes absolutely no sense to apply such a blanket ruleset.

Learn the basic behavior of the browser before you begin to blindly override it. Don’t use reset.css. You’ll never learn what really needs to be learned about the fundamental behaviors of a browser. First, learn the default style sheet, then tinker with it.

It doesn’t hurt to learn that some browsers create a margin by default. On learning that we can,

html, body {
    margin: 0;
    padding: 0;
}

Problem solved. Now all the browsers start out with a blank slate in terms of positioning of the root document.

We can also match font size to what the user has set in their User Style Sheet by,

html, body {
    font-size: 100%;
}

If our document uses relative sized fonts throughout, we’ll always be in the visual range chosen by the user.

Then there is color. Some users have default color schemes that could completely break our presentation.

html, body {
    color: black;
    background-color: white;
}

These are all legitimate ways to reset. They do not waste resources. They are easy to follow on each redraw of the page.

Note that interactions do not take place on a particular segment of the page. The entire page has to be redrawn. That means parsing the style sheet all over, each time.

Bottom line, don’t use reset.css. Turn off CSS and study every element in the specification, one by one and learn how they each behave in the browser. Get to know the User Agent Style Sheet before brushing it aside with a style sheet you do not understand.

I reset the default margins and padding, but I did not notice any changes in the website. Am I just not noticing it? What am I supposed to see?

2 Likes

For me its the same. What was supposed to change?

1 Like

I don’t see any change? What am I supposed to see?
Asking this again since no one resolved this.

1 Like

Also not seeing any changes after adding the 0 values. Also curious as to why things are offset in the first place compared to where they were in the previous lesson. What changed in the code to accomplish this?

1 Like

Personally all of my content was more streamlined, the border text & border over the image was moved to the left, the paragraph content was more streamlined and the buttons at the bottom of the page shifted position too

from what I was able to see (I’m using up to date chrome in may 2020), the only thing I noticed is that there was a slight white margin around the banner. resetting it meant that the banner stretched to the whole page.

It is frustrating that the code we fix in previous steps gets “unfixed” but after a point, I got tired of refixing it.

if you are getting frustrated with this, you can do what I do and keep a VS code window open to the side and copy paste all the code for the exercise into it.

whenever I fix something in vs code, I paste it back over. or instead you could copy it from codeacademy over to vs code before you go to the next page and keep the changes you made.

i also do this for the projects because the lack of auto completes can wear down on me if I have to call a function that was written to be 20 characters or something 8 times,

console.log(thisFunctionNameShouldHaveBeenShortened(x,y,z));
console.log(thisFunctionNameShouldHaveBeenShortened(x,y,z));
console.log(thisFunctionNameShouldHaveBeenShortened(x,y,z));
console.log(thisFunctionNameShouldHaveBeenShortened(x,y,z));
... x 5 more times ...
console.log(thisFunctionNameShouldHaveBeenShortened(x,y,z));

etc. having the tools in vs code to autocomplete function and variable calls is great, as well as typing log-tab or lo-tab and getting the whole console.log() statement printed out for me

1 Like

check my reply to cassi1994 down below!

There’s something I’m not understanding here…

Why do we need to reset the stylesheet if we’re going to be using an external stylesheet anyway? Isn’t our CSS file going to override the browser’s default stylesheet anyway?

Also, I did what the lesson told me to do, but I don’t see any changes. The only thing that stood out to me was the " Conservation Efforts at Lake Tahoe Being Praised by Nation’s Leaders" being shifted all the way to the left, but that’s been like that since the beginning of the lesson. How do I fix this error?

3 Likes

Okay, thank you @codemaster14994! This really helped!

This is the same thing I was wondering about. The lesson seemed to imply that using an external style sheet overrides user agent/browser style sheet, and we’re using an external style sheet, so why do we need to do a style reset?

All major web browsers have a default stylesheet they use in the absence of an external stylesheet.

1 Like

This is the first time it’s mentioned that “0” does not require a unit - but you actually have to “use” that knowledge back in the auto exercise too, I feel like it’d be good to add that bit of information there as well and stress that it’s not only that you don’t have to use a unit, you can’t use a unit - back in auto, my code didn’t run because I put it as “0px auto”.

Consider that zero is undefined. It is not a unit measure, hence any unit attached is meaningless.

1 Like

I’m aware, just pointing out that the first time you have to use that knowledge in an exercise (the auto one), that is not explained - a note would or something along those lines would be nice! (:

1 Like