< IMPORTANT >
Bootstrap also has also reset.css called reboot.css and if you are working with Bootstrap then it might be the best solution to use.
Latelly CSS Remedy is the new way of doing reset.css, check it out.
There are many different BROWSERD in this world. Unfortunately all of the display content (our website) diffrently.
If you need to match your design regardless of browser then you should start using reset.css file. When linked to your files header then it will reset all default styles and then only your styles will be applied.
Doing so, will ensure that your beautiful site will display 100% the same in all bowsers.
reset.css code can be found in these sites:
- Meyerweb:
- Normalize.css:
- The New CSS Reset: (This option seems to the most popular)
To get more info on reset.css just watch this video as well.
Just in case I have added code down here too.
/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
Remove list styles (bullets/numbers)
in case you use it with normalize.css
*/
ol, ul {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* Removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}