Intermediate CSS & HTML - Default Styles: Rewrite lesson (#27669)

* feat: rewrite default styles lesson

* Update intermediate_html_css/intermediate_css_concepts/default_styles.md

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

* Update intermediate_html_css/intermediate_css_concepts/default_styles.md

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

* Update intermediate_html_css/intermediate_css_concepts/default_styles.md

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

* Update intermediate_html_css/intermediate_css_concepts/default_styles.md

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

* fix: several changes per suggestions

* fix: link text correction

* feat: remove Elad article

* feat: add 2 new video resources

* fix: updates per request

* fix: remove video per request

---------

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

intermediate_html_css/intermediate_css_concepts/default_styles.md

@@ -1,6 +1,6 @@
 ### Introduction
 
-Browsers, by default, inject a little bit of style into your web projects. You may not have thought about this specifically, but you have definitely encountered it.
+Browsers apply a set of default styles to every webpage. You may not have thought about this directly, but you have undoubtedly encountered it.
 
 ### Lesson overview
 
@@ -9,36 +9,38 @@ This section contains a general overview of topics that you will learn in this l
 - You'll learn about default browser styles.
 - You'll learn how to use a CSS reset to remove or change those default styles.
 
-### Default styles
+### What are default styles and where do they come from?
 
-When you did the first [HTML Recipes project](https://www.theodinproject.com/lessons/foundations-recipes), you would have noticed that some elements already have a little bit of style applied to them. An `h1`, for instance, is bigger and bolder than regular text. Links (`a`) are blue and underlined. Lists (`ul` and `ol`) both have a bunch of padding surrounding them. Browsers accomplish this by inserting a little bit of CSS into every webpage. ([Here is Chrome's default HTML stylesheet](https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css))
+As you have worked on projects, you likely observed default styles applied to certain elements, such as larger and bolder headings on `h1` elements, and blue, underlined links on `a' elements. There is also a good chance you struggled with things like default margins and padding. These styles are part of the user-agent stylesheets, ensuring basic styling for webpages without CSS. Each browser has it's own set of user-agent stylesheets so the default styles do slightly between browsers.
 
-The problem with this is that there is no guarantee that different browsers will style everything the same. In general, inconsistencies are going to be pretty minor, but they DO exist. Also, in many cases as a developer, you're going to end up undoing or redoing all of this default styling to make your site look exactly how you envision it.
+### What if I don't like the defaults?
 
-To counter this, many developers start their projects with a "CSS Reset"; a file that undoes browser defaults, so that every element behaves the same in every browser.
+With very few exceptions you can simply write your own CSS rules.  The rules you write in your stylesheet have higher precedence than the user-agents rules, and therefore overwrite the defaults. However, there is another option.
 
-You don't _have_ to use a CSS reset. In many cases, you're going to end up undoing, or redoing a lot of the styles that a reset will provide for you. You can decide whether or not you want to use one on a regular basis, but it's worth taking the time to dig through a couple now. Understanding exactly how they're doing what they're doing is a useful exercise!
+To address inconsistencies across browsers and establish a consistent starting point for styling, some developers started using CSS resets. These resets are stylesheets containing CSS rules aimed at altering or removing the defaults set by user-agent stylesheets. Using them can help achieve consistency, and can provide a clean slate for developers to apply their styles without interference.
+
+<span id="resets-optional"></span>While CSS resets are still commonly used, they are not mandatory. Some developers opt not to use them, while others create their own or utilize prebuilt resets. It's important to understand that resets are subjective and opinionated, reflecting the preferences of the developer who created them. You can decide how you wish to do things yourself.
 
 ### Assignment
 
 <div class="lesson-content__panel" markdown="1">
 
-1.  [The Meyer Reset](https://meyerweb.com/eric/tools/css/reset/) is almost certainly the most popular. It basically removes every default style.
-2.  [Normalize.css](http://nicolasgallagher.com/about-normalize-css/) is another popular one. It's a little different in that it doesn't remove all the default styles, but tweaks them slightly to ensure that browsers are consistent. Currently, the article's download link is dead. If you want to install normalize.css for your project, download it from [normalize.css official website](https://necolas.github.io/normalize.css/) or use the instructions found in the [normalize.css repository's](https://github.com/necolas/normalize.css) `README.md` file. If you are unsure which method to use, go with the NPM package install.
-3.  [Reboot, Resets and Reasoning](https://css-tricks.com/reboot-resets-reasoning/) is a CSS tricks article that goes a little more in-depth, and mentions a few other popular resets.
-4.  Maybe more trivial than useful, this [Browser Default Styles](https://browserdefaultstyles.com/) site is fun to play with.
+1. Read [Reboot, Resets, and Reasoning](https://css-tricks.com/reboot-resets-reasoning/) for an excellent history of resets and what it means for a reset to be opinionated.
+1. Read [Making the case for CSS normalize and reset stylesheets in 2023](https://mattbrictson.com/blog/css-normalize-and-reset). It does an excellent job of discussing the differences in various resets and why you might choose to use them.
+1. [Josh Comeau's custom CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/) also includes a great breakdown of his thought process behind each rule he uses, giving you an idea of how to reason about these ideas.
 
 </div>
 
 ### Knowledge check
 
-This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
+The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
 
-- [Why would you want to use a CSS reset?](#default-styles)
+- [Why would you want to use a CSS reset?](#what-are-default-styles-and-where-do-they-come-from)
+- [Are resets required?](#resets-optional)
 
 ### Additional resources
 
-This section contains helpful links to related content. It isn’t required, so consider it supplemental.
+This section contains helpful links to related content. It isn't required, so consider it supplemental.
 
-- [A Look at CSS Resets in 2018](https://bitsofco.de/a-look-at-css-resets-in-2018/) is another article that talks about the various resets out there.
-- [A (more) Modern CSS Reset](https://piccalil.li/blog/a-more-modern-css-reset/) is an article that gives a more up-to-date css reset and then goes on to explain each line of it.
+- [Browser Default Styles](https://browserdefaultstyles.com/) allows you to view the user-agent applied rules for each element.
+- [The Fabulous Styleboard](https://fabulousgk.github.io/fabulous-styleboard/) contains a few resets you can select and deselect to see how they affect various HTML elements.