Resetting Defaults on CSS

Hello, I have a question regarding the following exercise

  1. https://www.codecademy.com/courses/learn-css/lessons/box-model-intro/exercises/resetting-defaults

  2. The exercise asks that I reset the margin and padding values by adding the

  • {
    margin: 0;
    padding: 0;
    }
    anywhere on the style.css sheet. However when I do that it doesn’t work and the page remains the same. It also asks that we try it in the body of the style.css sheet like :

    body {
    background-color: white;
    font-family: ‘Raleway’, sans-serif;

    • {
      margin: 0;
      padding: 0;
      }
      Here it works. Why doesnt it work outside the body as the exercise suggests? Thanks

So I can further help you can you tell me what was originally the padding and margin.

There were no specified margin or padding in the body declaration block although the rest of the css sheet did have various margins and paddings

body {
background-color: white;
font-family: ‘Raleway’, sans-serif;
}

.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}

.navigation li {
font-weight: 100;
letter-spacing: 2px;
padding: 20px;
}

.navigation li.logo {
color: black;
font-size: 18px;
font-weight: 700;
letter-spacing: 4px;
}

#banner {
background-image: url(“https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg”);
background-size: cover;
background-position: bottom center;
height: 700px;
width: 100%;
}

#banner .content h1 {
border: 3px solid white;
position: relative;
top: 50px;
width: 400px;
margin: 0 auto;
}

#main {
margin: 0 auto;
padding: 40px;
text-align: center;
width: 400px;
height: 1000px;
overflow: scroll;
}

h1 {
color: white;
font-size: 42px;
font-weight: 600;
text-align: center;
}

h2 {
border: 1px dotted red;
color: red;
font-size: 14px;
line-height: 48px;
padding: 20px 30px;
margin: 30px 20px;
text-align: center;
}

h3 {
color: red;
font-size: 26px;
font-weight: 700;
padding: 20px 10px;
}

p {
color: grey;
font-size: 16px;
line-height: 48px;
margin-top: 60px;
padding: 10px 20px;
}

.pull-quote {
margin: 0 auto;
width: 400px;
}

.byline {
border-bottom: 1px solid LightGrey;
border-top: 1px solid LightGrey;
color: DarkGrey;
font-size: 14px;
font-weight: 200;
}

.share {
border: 1px solid LightGrey;
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
}

.share a {
background: red;
border: 1px solid red;
border-radius: 3px;
color: white;
display: inline-block;
margin: 10px;
padding: 14px;
text-decoration: none;
}

.share a:hover {
background: white;
border: 1px solid red;
color: red;
}

Thanks!

That’s odd because I was able to do it with only resetting the margin and padding in The * ruleset. Try resetting the margin and padding in every ruleset.

Hi,

  1. The exercise does not ask you to reset margin and padding like this:
{
margin: 0;
padding: 0;
}

The text above only shows that you can do this.

  1. However, it should work as well. I just tried it, and it worked . Nevertheless it only works, if you use the *asterisk symbol at the beginning:
*{
margin: 0;
padding: 0;
}

I guess this was the mistake?

  1. It does definitely not ask you to do it like that:
body {
background-color: white;
font-family: ‘Raleway’, sans-serif;

{
margin: 0;
padding: 0;
}

I really wonder how this can work for you? If I do that, it destroys me half of my page :sweat_smile:

  1. Finally, what the exercise really asks you, is this here:
body {
background-color: white;
font-family: ‘Raleway’, sans-serif;
margin: 0;
padding: 0;
}

If anybody detects any mistakes I made while trying to explain, feel free to correct me :wink:

1 Like