From 64c0e13b679bf948efbf3ffd0a383ee1fc61e7bc Mon Sep 17 00:00:00 2001
From: Henry Lin <83106787+henrylin03@users.noreply.github.com>
Date: Mon, 13 Oct 2025 08:20:59 +1100
Subject: [PATCH 1/5] chore(inspecting-html-and-css): use statically CDN link
for updated images from PR #30119
---
.../html_css/css-foundations/inspecting-html-and-css.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css.md b/foundations/html_css/css-foundations/inspecting-html-and-css.md
index 8f1a3745ecc..8fa0506085e 100644
--- a/foundations/html_css/css-foundations/inspecting-html-and-css.md
+++ b/foundations/html_css/css-foundations/inspecting-html-and-css.md
@@ -20,11 +20,11 @@ Don't get overwhelmed with all the tools you're now seeing! For this lesson, we
In the Elements panel, you can see the entire HTML structure of your page. You can click on any of the elements in this panel to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
-
+
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you'll see all the styles that are currently affecting the element, as seen below:
-
+
### Testing styles in the inspector
From 1742ba0dd13a692d72e196239bfa7e53c7b11017 Mon Sep 17 00:00:00 2001
From: Henry Lin <83106787+henrylin03@users.noreply.github.com>
Date: Mon, 13 Oct 2025 08:24:16 +1100
Subject: [PATCH 2/5] chore(inspecting-html-and-css): update copy
copy now aligns better with the updated images and likely improves clarity for readers
---
.../html_css/css-foundations/inspecting-html-and-css.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css.md b/foundations/html_css/css-foundations/inspecting-html-and-css.md
index 8fa0506085e..597862bb8e5 100644
--- a/foundations/html_css/css-foundations/inspecting-html-and-css.md
+++ b/foundations/html_css/css-foundations/inspecting-html-and-css.md
@@ -18,11 +18,11 @@ Don't get overwhelmed with all the tools you're now seeing! For this lesson, we
### Inspecting elements
-In the Elements panel, you can see the entire HTML structure of your page. You can click on any of the elements in this panel to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
+In the Elements panel, you can see the entire HTML structure of your page. You can click on any of the elements in this panel to select that specific element. Alternatively, you can click on the upper-left "element select" icon (shown in the image below), then hover over any element on the page.
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you'll see all the styles that are currently affecting the element, as seen below:
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the var() syntax as that's irrelevant to this point):
From 090d60fc17564bb8a4293836031d96e9de306656 Mon Sep 17 00:00:00 2001
From: Henry Lin <83106787+henrylin03@users.noreply.github.com>
Date: Mon, 20 Oct 2025 08:24:53 +1100
Subject: [PATCH 3/5] chore(Inspecting HTML and CSS): update statically links
for images
use correct commit (SHA e7ab90e) for usage in statically converter to get URL for the CDN images
---
foundations/html_css/css-foundations/inspecting-html-and-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css.md b/foundations/html_css/css-foundations/inspecting-html-and-css.md
index 597862bb8e5..0fcc5729580 100644
--- a/foundations/html_css/css-foundations/inspecting-html-and-css.md
+++ b/foundations/html_css/css-foundations/inspecting-html-and-css.md
@@ -20,7 +20,7 @@ Don't get overwhelmed with all the tools you're now seeing! For this lesson, we
In the Elements panel, you can see the entire HTML structure of your page. You can click on any of the elements in this panel to select that specific element. Alternatively, you can click on the upper-left "element select" icon (shown in the image below), then hover over any element on the page.
-
+
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the var() syntax as that's irrelevant to this point):
From 2ed9de0e63a4343871b80932e806a3c4b5353c80 Mon Sep 17 00:00:00 2001
From: Henry Lin <83106787+henrylin03@users.noreply.github.com>
Date: Mon, 20 Oct 2025 08:27:43 +1100
Subject: [PATCH 4/5] chore(Inspecting HTML and CSS): update copy for
inspecting styles
assure reader that seeing var() syntax is something they can just ignore for now. I think these are referring to CSS variables which haven't been covered yet?
---
foundations/html_css/css-foundations/inspecting-html-and-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css.md b/foundations/html_css/css-foundations/inspecting-html-and-css.md
index 0fcc5729580..0aa9d9323ba 100644
--- a/foundations/html_css/css-foundations/inspecting-html-and-css.md
+++ b/foundations/html_css/css-foundations/inspecting-html-and-css.md
@@ -22,7 +22,7 @@ In the Elements panel, you can see the entire HTML structure of your page. You c
-When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the var() syntax as that's irrelevant to this point):
+When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the `var()` syntax as that's irrelevant to this point):
From 3ad9f0ef3aed7788380e30475130ad8f9d467eb8 Mon Sep 17 00:00:00 2001
From: Henry Lin <83106787+henrylin03@users.noreply.github.com>
Date: Thu, 23 Oct 2025 19:36:29 +1100
Subject: [PATCH 5/5] chore(Inspecting HTML and CSS): update image link.
---
foundations/html_css/css-foundations/inspecting-html-and-css.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css.md b/foundations/html_css/css-foundations/inspecting-html-and-css.md
index 0aa9d9323ba..3436d53b38c 100644
--- a/foundations/html_css/css-foundations/inspecting-html-and-css.md
+++ b/foundations/html_css/css-foundations/inspecting-html-and-css.md
@@ -24,7 +24,7 @@ In the Elements panel, you can see the entire HTML structure of your page. You c
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the "Your" in the "Your Career in Web Development Starts Here" header on the [TOP homepage](https://www.theodinproject.com/home), on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below (don't worry about the `var()` syntax as that's irrelevant to this point):
-
+
### Testing styles in the inspector