Merge pull request #50152 from wwlpublish/f4e37970b82d7d1442b9a96df7e9a394a0414b9f2f05a0f76f0b67cb8f8f708e-live

v-ccolin · web-flow · commit 42ba673324aa · 2025-04-28T08:33:10.000+01:00
Modules/M02-use-css-styles
diff --git a/learn-pr/wwl-azure/use-css-styles/1-introduction.yml b/learn-pr/wwl-azure/use-css-styles/1-introduction.yml
@@ -4,7 +4,7 @@ title: Introduction
 metadata:
   title: Introduction
   description: "Introduction to the module."
-  ms.date: 03/26/2024
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
diff --git a/learn-pr/wwl-azure/use-css-styles/2-explore-css-concepts.yml b/learn-pr/wwl-azure/use-css-styles/2-explore-css-concepts.yml
@@ -4,7 +4,7 @@ title: Explore CSS concepts
 metadata:
   title: Explore CSS concepts
   description: "Explore the core concepts of Cascading Style Sheets (CSS)."
-  ms.date: 03/26/2024
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
diff --git a/learn-pr/wwl-azure/use-css-styles/3-discover-more-css.yml b/learn-pr/wwl-azure/use-css-styles/3-discover-more-css.yml
@@ -4,7 +4,7 @@ title: Discover more about CSS
 metadata:
   title: Discover more about CSS
   description: "Explore more ways that CSS can make managing your content easier and your content more interesting for your readers."
-  ms.date: 03/26/2024
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
diff --git a/learn-pr/wwl-azure/use-css-styles/4-exercise-css-concepts.yml b/learn-pr/wwl-azure/use-css-styles/4-exercise-css-concepts.yml
@@ -4,7 +4,7 @@ title: Exercise - Use CSS concepts
 metadata:
   title: Exercise - Use CSS concepts
   description: "Use CSS concepts to begin styling your resume web page."
-  ms.date: 03/26/2024
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
diff --git a/learn-pr/wwl-azure/use-css-styles/5-inspect-selectors.yml b/learn-pr/wwl-azure/use-css-styles/5-inspect-selectors.yml
@@ -3,8 +3,8 @@ uid: learn.wwl.use-css-styles.inspect-selectors
 title: Inspect selectors
 metadata:
   title: Inspect selectors
-  description: "Inspect CSS selectors,  used to select the elements to apply styles."
-  ms.date: 03/26/2024
+  description: "Inspect CSS selectors, to select the elements used to apply styles."
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
diff --git a/learn-pr/wwl-azure/use-css-styles/6-exercise-selectors.yml b/learn-pr/wwl-azure/use-css-styles/6-exercise-selectors.yml
@@ -4,7 +4,7 @@ title: Exercise - Selectors
 metadata:
   title: Exercise - Selectors
   description: "Set styles for the social media and experience sections and links on your web page."
-  ms.date: 03/26/2024
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
diff --git a/learn-pr/wwl-azure/use-css-styles/7-knowledge-check.yml b/learn-pr/wwl-azure/use-css-styles/7-knowledge-check.yml
@@ -4,7 +4,7 @@ title: Module assessment
 metadata:
   title: Module assessment
   description: "Check what you learn in this module."
-  ms.date: 03/26/2024
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
@@ -14,7 +14,7 @@ durationInMinutes: 3
 content: |
   [!include[](includes/7-knowledge-check.md)]
 quiz:
-  title: "Check Your Knowledge on CSS Concepts"
+  title: "Check your knowledge on CSS concepts"
   questions:
   - content: "To make all `h2` elements on a page bold using a single style command, what method should be used?"
     choices:
diff --git a/learn-pr/wwl-azure/use-css-styles/8-summary.yml b/learn-pr/wwl-azure/use-css-styles/8-summary.yml
@@ -4,7 +4,7 @@ title: Summary
 metadata:
   title: Summary
   description: "Summary of the module."
-  ms.date: 03/26/2024
+  ms.date: 04/28/2025
   author: wwlpublish
   ms.author: eric
   ms.topic: unit
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/1-introduction.md b/learn-pr/wwl-azure/use-css-styles/includes/1-introduction.md
@@ -1,8 +1,8 @@
 Cascading style sheets (CSS) are used to apply formatting or style to a webpage's content. With CSS, you can tell the browser which fonts and colors to use and tell it many other ways to display your content. Using CSS, you tell the browser which elements to select and then describe the styles to apply to those elements.
 
-Imagine you're creating a webpage for your resume. You created the page using HTML, and want to set various style options such as the color and fonts. You'll modify the style by using CSS.
+Imagine you're creating a webpage for your resume. You created the page using HTML, and want to set various style options such as the color and fonts. You modify the style by using CSS.
 
-By the end of this module, you'll be able to:
+By the end of this module, you're able to:
 
 - Use selectors to apply style to different elements
 - Set fonts and sizing for text
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/2-explore-css-concepts.md b/learn-pr/wwl-azure/use-css-styles/includes/2-explore-css-concepts.md
@@ -15,7 +15,7 @@ Notice the code inside the curly braces, `color: orange;`t declares how the sele
 Your sample declaration contains a **property**, `color`, which is separated from a **value**, `orange`, with a colon (`:`), and the end of the setting is marked by a semicolon (`;`).
 
 > [!NOTE]
-> There is no need to memorize every available property and value in CSS. There are a lot of websites that you can reference. Also, tools such as [vscode.dev](https://vscode.dev) or [Visual Studio Code](https://code.visualstudio.com) offer auto-complete options that can help guide you as you create a CSS.
+> There's no need to memorize every available property and value in CSS. There are many websites that you can reference. Also, tools such as [vscode.dev](https://vscode.dev) or [Visual Studio Code](https://code.visualstudio.com) offer autocomplete options that can help guide you as you create a CSS.
 
 ## Embed a CSS file
 
@@ -51,7 +51,7 @@ When viewed in a browser, the "Welcome" text in the `<h1>` tag displays gray.
 
 ## Link to a CSS file
 
-When you add styles to Hypertext Markup Language (HTML), it's best to do your styling in a separate CSS file. When several HTML files use the same CSS, they'll have a consistent appearance. Plus, updating one CSS file is easier than having to update each individual HTML file.
+When you add styles to Hypertext Markup Language (HTML), it's best to do your styling in a separate CSS file. When several HTML files use the same CSS, they have a consistent appearance. Plus, updating one CSS file is easier than having to update each individual HTML file.
 
 To reference the CSS file, you use the `link` element.
 
@@ -61,7 +61,7 @@ To reference the CSS file, you use the `link` element.
 <link rel="stylesheet" href="style.css">
 ```
 
-Now you'll have at least two files, an `.html` file and a `.css` file. The previous example would have an HTML file that links to the CSS.
+Now you have at least two files, an `.html` file and a `.css` file. The previous example would have an HTML file that links to the CSS.
 
 
 ```html
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/3-discover-more-css.md b/learn-pr/wwl-azure/use-css-styles/includes/3-discover-more-css.md
@@ -6,33 +6,33 @@ As with any computer language, CSS supports comments. To comment in a section of
 
 > [!IMPORTANT]
 > CSS comments are public, and accessible by both the browser and users of your website. **Do not** store sensitive information in comments.
-> 
+>
 > CSS comments are formatted differently from HTML comments. Comments in HTML use the `<!--comment-->` syntax.
 
-## Setting Fonts
+## Setting fonts
 
 You can use CSS to tell the browser what font you want to use for specific text. Sometimes you want to use Arial for readability or something fancier for style. The following image shows some text in Arial and other text in a font called "Impact."
 
 :::image type="content" source="../media/two-fonts.png" alt-text="Screenshot of browser render of H T M L text in two fonts.":::
 
-The most common option for setting the font to use on a page is `font-family`. `font-family` is typically set to a list of fonts, allowing the browser to use the first font listed it can support. For example, a setting of `Tahoma, Verdana, sans-serif` will attempt to use Tahoma, followed by Verdana, and finally a generic sans serif font.
+The most common option for setting the font to use on a page is `font-family`. `font-family` is typically set to a list of fonts, allowing the browser to use the first font listed it can support. For example, a setting of `Tahoma, Verdana, sans-serif` attempts to use Tahoma, followed by Verdana, and finally a generic sans serif font.
 
 You can also use other options, such as the style, weight, and decoration. `font-style` is used to italicize text by setting the value to `italic`. `font-weight` supports different bold settings, with `bold` being the most common. And finally, `text-decoration` is used to `underline`, `overline`, or `line-through` text.
 
-| CSS                           | Result      |
-| ----------------------------- | ----------- |
-| `font-weight: bold;`          | **Demo**    |
-| `font-style: italic;`         | *Demo*      |
+| CSS                              | Result   |
+| -------------------------------- | -------- |
+| `font-weight: bold;`             | **Demo** |
+| `font-style: italic;`            | *Demo*   |
 | `text-decoration: line-through;` | ~~Demo~~ |
 
 `text-decoration` can feel different from the other options used to modify a font's display. The key difference is that `text-decoration` is used to apply style around or on the text but doesn't modify the actual font itself. Bold and italics are modifying the font.
 
 > [!NOTE]
-> Using underline on a webpage should typically be avoided because the text may appear to be a hyperlink.
+> Using underline on a webpage should typically be avoided because the text can appear to be a hyperlink.
 
-## Sizing Fonts
+## Sizing fonts
 
-The `font-size` allows you to indicate the font size you wish to use. CSS offers the ability to use absolute or relative sizing. Absolute sizing is typically set in pixels and will always use the specified size. Relative sizing can be based on the default size for the browser and measured in percent or based on the sizing of the reference element.
+The `font-size` allows you to indicate the font size you wish to use. CSS offers the ability to use absolute or relative sizing. Absolute sizing is typically set in pixels and always use the specified size. Relative sizing can be based on the default size for the browser and measured in percent or based on the sizing of the reference element.
 
 > [!NOTE]
 > The default font size for many browsers is 16 pixels.
@@ -60,7 +60,7 @@ div {
 }
 ```
 
-If the `div` element, `1em` would be 14 pixels because the parent is `div` and set to `14px`, while `1rem` would be 18 pixels because the `html` root is set to `18px`.
+If the `div` element `1em` is 14 pixels because the parent is `div` and set to `14px`, while `1rem` would be 18 pixels because the `html` root is set to `18px`.
 
 `1.5em` for the `div` element would be 21 pixels (**14 * 1.5 = 21**), and `1.5rem` would be 27 pixels (**18 * 1.5 = 27**). You can use `em` and `rem` to ensure the rest of the page scales as you update the parent or root sizes.
 
@@ -90,6 +90,6 @@ h2 {
 > [!IMPORTANT]
 > Color selection should always consider those who have a color vision deficiency. You can use tools such as [Color Safe](http://colorsafe.co) to aid in the selection of contrasting colors to ensure your site is accessible to all users.
 
-As you might suspect, there are dozens of available named colors, and RGB values offer an infinite set of options. Editors such as [vscode.dev](https://vscode.dev) or [Visual Studio Code](https://code.visualstudio.com) can help identify the available color values. Both editors will show a color swatch preview in your CSS. If you mouse over the swatch you're presented with a color selector you can use to set the color you desire.
+As you might suspect, there are dozens of available named colors, and RGB values offer an infinite set of options. Editors such as [vscode.dev](https://vscode.dev) or [Visual Studio Code](https://code.visualstudio.com) can help identify the available color values. Both editors show a color swatch preview in your CSS. If you mouse over the swatch, you're presented with a color selector you can use to set the color you desire.
 
 :::image type="content" source="../media/color-selector.png" alt-text="Screenshot of color selector from Visual Studio Code.":::
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/4-exercise-css-concepts.md b/learn-pr/wwl-azure/use-css-styles/includes/4-exercise-css-concepts.md
@@ -1,34 +1,34 @@
-You want to begin styling your resume web page. You'll start by selecting the font and setting sizes for the various elements you'll use on the page.
+You want to begin styling your resume web page. You start by selecting the font and setting sizes for the various elements you use on the page.
 
 This module uses [vscode.dev](https://vscode.dev/) - a web-based version of Visual Studio Code and [CodeSwing](https://marketplace.visualstudio.com/items?itemName=codespaces-Contrib.codeswing). These tools help streamline the development process. No local installation is required to complete the exercises that follow.
 
-## Create a Project
+## Create a project
 
-You'll start by creating a folder, setting up your tooling, and creating a "swing" using CodeSwing in vscode.dev. A swing will automatically display the results of your code in vscode.dev. Using Microsoft Visual Studio Code with CodeSwing allows you to quickly make modifications with a preview of updates happening in real time.
+You start by creating a folder, setting up your tooling, and creating a "swing" using CodeSwing in vscode.dev. A swing will automatically display the results of your code in vscode.dev. Using Microsoft Visual Studio Code with CodeSwing allows you to quickly make modifications with a preview of updates happening in real time.
 
 1. Create a folder on your desktop named **resume**.
-1. Open [vscode.dev](https://vscode.dev).
-1. Select **Open Folder**.
-1. Navigate to the **resume** folder you created earlier and select **Select Folder**.
-1. When prompted to **Let site view files**, select **View Files**.
-1. Select the **Extensions** button.
+2. Open [vscode.dev](https://vscode.dev).
+3. Select **Open Folder**.
+4. Navigate to the **resume** folder you created earlier and select **Select Folder**.
+5. When prompted to **Let site view files**, select **View Files**.
+6. Select the **Extensions** button.
     >:::image type="content" source="../media/extensions.png" alt-text="Screenshot of Visual Studio extensions button.":::
-1. In the **Search Extensions in Marketplace** text box, type **CodeSwing**.
-1. Select **Install** to install **CodeSwing**.
-1. Open the Command Palette by selecting **Ctrl+Shift+P** or **Cmd-Shift-P** on a Mac.
-1. Type **CodeSwing** in the Command Palette and select **CodeSwing: New Swing in Directory**.
-1. Select **Select Folder** to use the current directory (which is the one you created in a prior step).
-1. Select **Basic: HTML/CSS/JavaScript**.
-1. If prompted to **Save changes to resume**, select **Save changes**.
-1. Select the **x** next to **script.js** inside vscode.dev to close the JavaScript file as you won't be using this file during the exercise.
+7. In the **Search Extensions in Marketplace** text box, type **CodeSwing**.
+8. Select **Install** to install **CodeSwing**.
+9. Open the Command Palette by selecting **Ctrl+Shift+P** or **Cmd-Shift-P** on a Mac.
+10. Type **CodeSwing** in the Command Palette and select **CodeSwing: New Swing in Directory**.
+11. Select **Select Folder** to use the current directory (which is the one you created in a prior step).
+12. Select **Basic: HTML/CSS/JavaScript**.
+13. If prompted to **Save changes to resume**, select **Save changes**.
+14. Select the **x** next to **script.js** inside vscode.dev to close the JavaScript file as you don't use this file during the exercise.
 
-Visual Studio Code will create two sections side by side. The left will be your editors, where you can enter your HTML and CSS. The right will behave like a browser, displaying the results of your code.
+Visual Studio Code creates two sections side by side. The left will be your editors, where you can enter your HTML and CSS. The right behaves like a browser, displaying the results of your code.
 
 ## Create the HTML
 
-You'll use existing HTML to allow us to focus solely on the CSS. The HTML includes the `link` element to reference the CSS file.
+You use existing HTML to allow us to focus solely on the CSS. The HTML includes the `link` element to reference the CSS file.
 
-1. Copy the following HTML into the window titled **index.html**:
+- Copy the following HTML into the window titled **index.html**:
 
     ```html
     <html>
@@ -72,9 +72,9 @@ You'll use existing HTML to allow us to focus solely on the CSS. The HTML includ
     </html>
     ```
 
-## Set Font Type and Size
+## Set font type and size
 
-By default, most browsers will use a serif font such as Times New Roman. You want to set the page default to a more popular font. Additionally, you want to set the size of the font for the page and various headers.
+By default, most browsers use a serif font such as Times New Roman. You want to set the page default to a more popular font. Additionally, you want to set the size of the font for the page and various headers.
 
 1. Inside the file titled **style.css**, add the following CSS to set the font family to Verdana with fallback options, and the font size to 12 pixels on the `html` element:
 
@@ -85,10 +85,10 @@ By default, most browsers will use a serif font such as Times New Roman. You wan
     }
     ```
 
-    You're using the `html` element to update the root font and sizing. With the `html` element will allow you to use `rem` sizing.
+    You're using the `html` element to update the root font and sizing. With the `html` element allows you to use `rem` sizing.
 
-1. Notice the page automatically updates with the changes.
-1. Add the following CSS code to the end of **style.css** to set the sizes for `h1` through `h4`.
+2. Notice the page automatically updates with the changes.
+3. Add the following CSS code to the end of **style.css** to set the sizes for `h1` through `h4`.
 
     ```css
     h1 {
@@ -108,12 +108,12 @@ By default, most browsers will use a serif font such as Times New Roman. You wan
     }
     ```
 
-    `rem` is based on the root size, which is 14 pixels. As an example, this CSS will set the size of `h1` to 22.4 pixels.
+    `rem` is based on the root size, which is 14 pixels. As an example, this CSS sets the size of `h1` to 22.4 pixels.
 
-1. The page is automatically updated in vscode.dev.
-1. Leave the window open as you'll use it in the next exercise.
+4. The page is automatically updated in vscode.dev.
+5. Leave the window open as you'll use it in the next exercise.
 
-## Result and Next Steps
+## Result and next steps
 
 The following screenshot is the result of the CSS you applied in this exercise. If you wish to experiment with different fonts and sizes, you can modify the CSS as you wish.
 
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/5-inspect-selectors.md b/learn-pr/wwl-azure/use-css-styles/includes/5-inspect-selectors.md
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/6-exercise-selectors.md b/learn-pr/wwl-azure/use-css-styles/includes/6-exercise-selectors.md
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/7-knowledge-check.md b/learn-pr/wwl-azure/use-css-styles/includes/7-knowledge-check.md
diff --git a/learn-pr/wwl-azure/use-css-styles/includes/8-summary.md b/learn-pr/wwl-azure/use-css-styles/includes/8-summary.md
diff --git a/learn-pr/wwl-azure/use-css-styles/index.yml b/learn-pr/wwl-azure/use-css-styles/index.yml
