CSS Resets & Default Browser Styles #SigmaSchoolHQ

Description

published 19.12.2019

CSS Resets & Default Browser Styles #SigmaSchoolHQ
CSS
Training
Sigma School
English
SoftJack
19.12.2019

🎥 All browsers, whether it is Chrome, Firefox, Safari or Internet Explorer, apply some styles to webpages by default, whether you like it or not. Even if you have only written some simple unstyled HTML, and are just asking the browser to display it for you, browsers will display that page with some kind of styling. These default styles include things like adding margin and padding to elements, making your text black, your background white, and links blue and underlined. They will give heading and paragraphs particular font sizes & weights, and so on.

Unfortunately, browsers do not share common universal styles. They are all similar in how they display your page, but there are slight and minor differences between them. Which affect how consistent your webpage looks to users across browsers.

Browser styles are also present even when you do provide your own CSS. If you’re wondering why your navbar isn’t exactly flush to the top of the page, then it’s likely because of default padding or margin applied by the browser itself to the body element.

You can of course counter this, either by writing styles yourself, or by using a CSS reset. In essence, a CSS reset, removes the default styling applied by browsers, giving you a blank canvas to work from. There are a range of these available, and some reset more deeply and aggressively than others. We’ll go through a selection of the most widely used CSS resets and learn how you would include them in a project. Those we'll look at include Eric Meyer’s Reset CSS, Normalize, Sanitize, Reboot, and finally, the new kid in town, CSS Remedy.

💻 Get the code:
GitHub Repo: https://github.com/SigmaSchoolHQ/css-...

🌏 Links used in the video:
Reset CSS: https://meyerweb.com/eric/tools/css/r...
Reset CSS CDN: https://cdnjs.com/libraries/meyer-reset

Normalize: https://necolas.github.io/normalize.css/
Normalize GitHub Repo: https://github.com/necolas/normalize....
Normalize CDN: https://cdnjs.com/libraries/normalize

Sanitize: https://csstools.github.io/sanitize.css/
Sanitize GitHub Repo: https://github.com/csstools/sanitize.css

Bootstrap: https://getbootstrap.com/docs/4.3/get...
Bootstrap Release Working Group: https://github.com/twbs/release
Reboot: https://getbootstrap.com/docs/4.0/con...
Reboot stylesheet: https://github.com/twbs/bootstrap/blo...

🚀 This video is part of the CSS for Absolute Beginners playlist: https://www.youtube.com/playlist?list...

👍 Social Media:
https://www.facebook.com/SigmaSchoolHQ
https://www.twitter.com/SigmaSchoolHQ
https://www.instagram.com/SigmaSchoolHQ

📩Email: sigmaschool@outlook.com

💾 Code & Projects:
https://github.com/SigmaSchoolHQ
https://codepen.io/SigmaSchoolHQ