New images and content for the css getting started guide

microsoft-edge/devtools-guide-chromium/css/index.md

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 11/16/2022
+ms.date: 10/19/2023
 ---
 <!-- Copyright Kayce Basques
 
@@ -36,7 +36,7 @@ Follow the interactive tutorial sections in this article to learn the basics of
 
    In the **DOM Tree** panel under the **Elements tool**, the `Inspect Me!` element is highlighted.
 
-   ![The inspected element is highlighted in the DOM Tree](./index-images/css-elements-inspect-me.png)
+   ![The inspected element is highlighted in the DOM Tree](./index-images/inspect-me.png)
 
 1. In the `Inspect Me!` element, find the value of the `data-message` attribute and copy it.
 
@@ -50,7 +50,7 @@ Follow the interactive tutorial sections in this article to learn the basics of
 
 1. In the `aloha` class, find the value for the `padding` style and copy it.
 
-   ![CSS class applied to the inspected element is highlighted in the Styles panel](./index-images/css-elements-inspect-me-styles.png)
+   ![CSS class applied to the inspected element is highlighted in the Styles panel](./index-images/inspect-me-styles.png)
 
 1. On the page view, paste the `padding` value in the **Value of padding:** text box.
 
@@ -74,7 +74,7 @@ Use the **Styles** panel when you want to change or add CSS declarations to an e
 
     The `background-color:honeydew` declaration is applied to the element using the `element.style` section of the **Styles** panel:
 
-   ![Add a CSS declaration to the element using the Styles panel](./index-images/css-elements-add-background-color-to-me-styles-p.png)
+   ![Add a CSS declaration to the element using the Styles panel](./index-images/add-background-color-to-me-styles-p.png)
 
 
 <!-- ====================================================================== -->
@@ -88,13 +88,13 @@ To display how an element looks when a CSS class is applied to or removed from a
 
 1. Right-click the `Add A Class To Me!` text, and then select **Inspect**.
 
-1. Click **.cls**.  DevTools shows a text box where you can add CSS classes to the page element that you're inspecting.
+1. Click the **Element Classes** (**.cls**) button.  DevTools shows a text box where you can add CSS classes to the page element that you're inspecting.
 
-1. Type `color_me` in the **Add new class** text box and then press **Enter**.  A checkbox appears below the **Add new class** text box, where you can toggle the class on and off.  If the `Add A Class To Me!` element has any other classes applied to it, you can also  toggle each class from here.
+1. Type `color_me` in the **Add new class** text box and then press **Enter**.  A checkbox appears below the **Add new class** text box, where you can toggle the class on and off.  If the `Add A Class To Me!` element has any other classes applied to it, you can also toggle each class from here.
 
    The `color_me` class is applied to the element using the **.cls** section of the **Styles** panel:
 
-   ![Apply the color_me class to the element](./index-images/css-elements-add-a-class-to-me-styles-cls.png)
+   ![Apply the color_me class to the element](./index-images/add-a-class-to-me-styles-cls.png)
 
 
 <!-- ====================================================================== -->
@@ -110,13 +110,13 @@ Use the **Styles** panel to permanently apply a CSS pseudostate to an element.
 
 1. Right-click the `Hover Over Me!` text, and then select **Inspect**.
 
-1. In the **Styles** panel, click **:hov**.
+1. In the **Styles** panel, click the **Toggle Element State** (**:hov**) button.
 
 1. Select the **:hover** checkbox.  The background color changes like it did in the first step, even though you aren't actually hovering over the element.
 
    The next screenshot shows the result of toggling the `:hover` pseudostate on an element.
 
-   ![Toggling the hover pseudostate on an element](./index-images/css-elements-hover-over-me-styles-hov-hover.png)
+   ![Toggling the hover pseudostate on an element](./index-images/hover-over-me-styles-hov-hover.png)
 
 
 <!-- ====================================================================== -->
@@ -140,11 +140,11 @@ Use the **Box Model** interactive diagram in the **Styles** panel to change the
 
    Hovering over the element's padding:
 
-   ![Hovering over the element's padding](./index-images/css-elements-change-my-margin-styles-padding.png)
+   ![Hovering over the element's padding](./index-images/change-my-margin-styles-padding.png)
 
    Changing the element's left margin:
 
-   ![Changing the element's left margin](./index-images/css-elements-change-my-margin-styles-margin-edit.png)
+   ![Changing the element's left margin](./index-images/change-my-margin-styles-margin-edit.png)
 
 
 <!-- ====================================================================== -->
@@ -156,27 +156,29 @@ Using separate layouts allows for a one-column layout for mobile devices and mul
 
 Use the following steps to debug or test the media queries that you defined in your CSS.
 
-1. To open DevTools, you can right-click in a webpage and then select **Inspect**.
+1. Open the [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo page in a new window or tab.
+
+1. To open DevTools, right-click in the webpage and then select **Inspect**.
 
 1. Click the **Toggle device emulation** (![Device Emulation icon](./index-images/device-emulation-icon-light-theme.png)) button.  Or, when DevTools has focus, press **Ctrl+Shift+M** (Windows, Linux) or **Command+Shift+M** (macOS).
 
-   <!-- todo: update to show new tooltip: -->
+   The Device Toolbar opens in the webpage and the webpage is now rendered within the Device Emulation pane:
 
-   ![Opening the device toolbar](./index-images/css-elements-media-queries-open-device-toolbar.png)
+   ![Opening the device toolbar](./index-images/media-queries-open-device-toolbar.png)
 
-1. With the device toolbar open, click the **...** menu on the top-right and then select **Show media queries**:
+1. With the device toolbar open, click the **More options** (![The more options icon](./index-images/more-options-icon.png)) button on the top-right and then select **Show media queries**:
 
-   ![Showing media queries in the Device Toolbar](./index-images/css-elements-media-queries-showing-mq.png)
+   ![Showing media queries in the Device Toolbar](./index-images/media-queries-showing-mq.png)
 
    The colored bars above the webpage represent the different media queries.
 
 1. Hover on the boundaries in the bars to display the values of the different media queries.  Click each media query value to resize the web page to match.
 
-   ![Selecting a media query from the preview bar](./index-images/css-elements-media-queries-select-bar.png)
+   ![Selecting a media query from the preview bar](./index-images/media-queries-select-bar.png)
 
-1. To debug media queries and open the CSS file in the **Sources** editor, right-click a bar segment, and then select **Reveal in source code**:
+1. To open the CSS file that contains your media queries and edit their source code, right-click one of the colored bars and then select **Reveal in source code**. The **Sources** tool appears, and the corresponding media query is highlighted in the CSS file:
 
-   ![Showing media queries in the editor in the Sources tool](./index-images/css-elements-media-queries-reveal-in-sources.png)
+   ![Showing media queries in the editor in the Sources tool](./index-images/media-queries-reveal-in-sources.png)
 
 
 <!-- ====================================================================== -->