why does't styling body css overwrite the specific elements I already styled?

You are on point.

But look at it like this: the body tag is a parent tag and every other tag that resides in the body is a child of body.

So if you style the body tag than the whole body will take that styling.

When you style any tag that is a child of body, the styling will be applied to that element you selected.

The other styling still stays for body.

If you wrote a rule for the body tag again in your code ( after the initial body styling ) -> the second rules would be applied.

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

//****************************
// some styling in between
//****************************

body {
    background-color: blue;
}

This is the example that you can take a look at.

You can style an exact same element n-times in your CSS and the last declared rule will take an affect.

In the example above:

1st Styling: background color will be black & the font color white 2nd Styling: the background color changes to blue and the font color stays white -> If you wrote a new rule for the font color then that rule would be applied.

Hope this helped you a bit.

What you styled earlier probably had a higher specificity than the body selector. Guil explains how specificity works in one of his early videos in CSS Basics. Alternatively, you could google "CSS specificity" to find out more.