In my Codecademy course, there was a lesson about Resetting Defaults through:
* {
margin: 0;
padding: 0;
}I didn't really understand what this does. From my understanding, resetting defaults sets all the elements that have not been assigned a certain property the property specified in the * selector above.
Is this the correct definition and what is its use?
From my understanding, resetting defaults sets all the elements that have not been assigned a certain property the property specified in the * selector above.
Yes, that's about correct. It's mainly used to change the values from their default values to a certain value specified by us
Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible.
Need for CSS Reset -
Using a CSS Reset, we can force every browser to have all its styles reset to a value specified by us, thus avoiding cross-browser differences as much as possible.
asterisk * selects all of the elements in the document and whatever style you insert will override the style for all elements unless that element's style is explicitly specified.
For example:
* {
margin: 0;
}
div {
margin: 4px;
}
This styling will change the margin of all the elements in the document to 0 which will then be overridden by the div element. So, div will have a margin of 4px.
Different browsers have different default stylings for different elements. And, it's also used because sometimes you just want to define everything yourself.
