CSS Resets and Default Browser Styles

Published: 13 May 2021
on channel: Craig A. Bourne
3,559
158

► All browsers apply styles to web pages by default, whether you like it or not. Even if you have only written some simple HTML.

Unfortunately, browsers do not share styles exactly, which affects how consistent your webpage looks across browsers.

You can counter this issue with a 'CSS reset' which removes or balances the default styling applied by browsers, giving you a blank canvas to work from.

Many resets are available, and some reset more deeply than others.

In this video, we will look at a selection of 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, CSS Remedy.

► Try the resets out with this CSS Reset Sandbox: https://codepen.io/tryminim/pen/qBrMPOB

► Timestamps:
0:00 Start
1:58 Looking at the default styles applied to web pages in Chrome & Firefox
2:33 Why worry about default styles?
3:18 We can override default styles with a CSS reset
3:50 Eric Meyer’s CSS Reset
7:09 Normalize.css
9:49 Sanitize.css
11:12 Bootstrap Reboot
12:40 CSS Remedy
14:41 Summary

► Get the code:
GitHub Repo: https://github.com/craigabourne/css-r...

► 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...

Info on CDNs (in case you're wondering): https://blog.stackpath.com/glossary-cdn/

► This video is part of the CSS for Absolute Beginners playlist:    • CSS for Absolute Beginners  

► Social Media:
  / craigabourne  
  / craigabourne  

► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne


Watch video CSS Resets and Default Browser Styles online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 13 May 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,559 once and liked it 158 people.