WDD 231: Web Frontend Development I

W01 Learning Activity: CSS Normalization

Overview

Every browser and other user agent (such as a bot or other program) has default CSS properties for HTML elements. The goal with a normalize or reset CSS reference is to reduce browser inconsistencies in the default styling.

Prepare

Historically

CSS resets have been around for a long time. One of the best-known resets was published by Eric Meyer in 2007. It was a simple file that removed all default browser styling. Since then, many developers have created their own variations of reset CSS files. The most popular of these is normalize.css, created by Nicolas Gallagher in 2011. Normalize.css is a modern alternative to CSS resets that preserves useful default styles rather than just removing them.

Current State

Browsers have come a long way in adhering to web standards. Default styles are more consistent across modern browsers.

Normalize.css is still relevant as it doesn't completely wipe out default styles, but rather normalizes them across browsers, preserving useful defaults.

Normalize.css has not been updated since version 8.0.1 in 2018. Many developers now write a short custom reset instead, with rules such as box-sizing: border-box, zero margins, and img { max-width: 100%; display: block; }.

Many CSS frameworks use this kind of reset. Bootstrap's is named Reboot and Tailwind CSS's is named Preflight.

Summary

Whether to use a normalize or reset stylesheet is a matter of opinion, and its benefits and shortcomings are debated among professionals. It helps most when you need to support older browsers or need tight cross-browser consistency.

Watch CSS Normalization and ResetHow newsroom.churchofjesuschrist.org uses CSS normalization and reset.

Activity Instructions

In this activity, you will create your own normalize CSS file and include it on your site.

1. Create a normalize.css file located in your wdd231 root styles folder.
2. Use the following code reference and copy the CSS into your file. Nicolas Gallagher's normalize.css
3. Apply the CSS by including the link in the head of a page. For example, this line of code would be included before any other CSS link reference.

   <link rel="stylesheet" href="styles/normalize.css">

   IMPORTANT CONCEPT: Why should this CSS reference precede all the other CSS references?

   If you have more than one rule, all of which have exactly the same weight, then the one that comes last in the CSS will win (cascade).

4. An alternative to hosting your own normalize or reset CSS file is to use a content delivery network (CDN) reference.
   This particular reference has minified the "normalize.css" file as indicated by the .min in the file name.

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

   Take a look at the file and see how difficult it is to read for humans but completely usable by the browser.
   What does minification mean when it comes to web file optimization?

   All unnecessary syntax in the CSS is removed from the file, including spaces, comments, and line breaks. More sophisticated minification would optimize the CSS and remove redundancy.