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..04648f45a6c 100644 --- a/foundations/html_css/css-foundations/inspecting-html-and-css.md +++ b/foundations/html_css/css-foundations/inspecting-html-and-css.md @@ -20,10 +20,12 @@ 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. + ![Inspector Icon](https://cdn.statically.io/gh/TheOdinProject/curriculum/594984d7c9f9e744577f19ea475b3864e8cc7c91/html_css/v2/foundations/inspecting-html-and-css/imgs/01.png) 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: + ![Overwritten style](https://cdn.statically.io/gh/TheOdinProject/curriculum/f8fd38fc62578d8e8368f5303126215a492847f0/foundations/html_css/inspecting-html-and-css/imgs/03.png) ### Testing styles in the inspector diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/00.png b/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/00.png new file mode 100644 index 00000000000..a377698789b Binary files /dev/null and b/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/00.png differ diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/01.png b/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/01.png index fca153c13da..e2aa964ff84 100644 Binary files a/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/01.png and b/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/01.png differ diff --git a/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/03.png b/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/03.png deleted file mode 100644 index 0da2845cf06..00000000000 Binary files a/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/03.png and /dev/null differ