WDD 230 | CSS Normalize and Reset

CSS Normalize and Reset

Overview

Every browser and its user agents have default CSS properties for HTML elements. As a web designer and developer, you may find it advantageous to provide a consistent starting point. The goal with a normalize or reset CSS reference is to reduce browser inconsistencies.

"Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing." - Nicolas Gallagher

Prepare

Read: 📃About normalize.css - Nicolas Gallagher
The use of CSS normalization and related methods is opinionated. This means its benefits and shortcomings can be debated among professionals. For example, the video 🎦"Do we need CSS Resets?" demonstrates the purpose and scope of use by one developer.
Eric Meyer's "reset.css" file is a similar methodology that is very common and is also used for reducing browser inconsistencies on default settings instead of normalize.css. Using a reset CSS method is generally more aggressive than using a normalize approach.
📃 What is the difference between "resetting: and "normalizing" in CSS. - geeksforgeeks.org
Watch: 🎦 Demonstration CSS Normalization / Reset

Activity Instructions

Create your own copy of a normalize CSS file by first creating a "normalize.css" file located in your wdd230 root "styles" folder.
Use the following code reference and copy the CSS into your file. Nicolas Gallagher's - normalize.css
Apply the CSS by including it in the head of your course home portal page.
The following line of code should appear first in the CSS link reference cascade.
```
<link rel="stylesheet" href="styles/normalize.css">
```
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.
CSS Cascade and Inheritance - MDN
CSS specificity - MDN
An alternative to hosting your own normalize or reset CSS file is to use a content delivery network (CDN) reference.
This particular reference has minimized 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. 👀 File

What does minimizing mean when it comes to web file optimization?

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

Submission

Save and then publish (commit and push) your home page to your wdd230 GitHub Pages repository.