changed files by pdets auto publish service, publishid[102cfb98-ee17-440f-9952-377019341bb3] and do [publish].

Author: wwlpublish

learn-pr/wwl-azure/use-css-styles/7-knowledge-check.yml

@@ -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:

learn-pr/wwl-azure/use-css-styles/includes/3-discover-more-css.md

@@ -6,10 +6,10 @@ 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."
 
@@ -19,18 +19,18 @@ The most common option for setting the font to use on a page is `font-family`. `
 
 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 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 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.
 

learn-pr/wwl-azure/use-css-styles/includes/4-exercise-css-concepts.md

@@ -2,33 +2,33 @@ You want to begin styling your resume web page. You start by selecting the font
 
 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 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 don't use 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 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 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,7 +72,7 @@ You use existing HTML to allow us to focus solely on the CSS. The HTML includes
     </html>
     ```
 
-## Set Font Type and Size
+## Set font type and size
 
 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.
 
@@ -87,8 +87,8 @@ By default, most browsers use a serif font such as Times New Roman. You want to
 
     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 {
@@ -110,10 +110,10 @@ By default, most browsers use a serif font such as Times New Roman. You want to
 
     `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.
 

learn-pr/wwl-azure/use-css-styles/includes/5-inspect-selectors.md

@@ -7,7 +7,7 @@ There are three core types of selectors:
 
 By using these selectors, you can apply styles to many elements or a few.
 
-## Element Selectors
+## Element selectors
 
 An element selector applies to all elements with that tag. Any HTML element can be used as an element selector. Using `h1` enables you to modify all `h1` elements on the page.
 
@@ -17,7 +17,7 @@ h1 {
 }
 ```
 
-## Class Selectors
+## Class selectors
 
 All HTML elements enable you to add a `class` attribute. `class` is used to group elements together and enable you to mark them for applying CSS settings.
 
@@ -66,18 +66,18 @@ a:hover {
 
 Some of the most common pseudo-classes are listed in the following table:
 
-| Pseudo-class  | Description                                          |
-| ------------- | ---------------------------------------------------- |
-| `hover`       | User is hovering their cursor over an item           |
-| `visited`     | A link that was previously clicked              |
-| `link`        | An unvisited link                                    |
+| Pseudo-class  | Description                              |
+| ------------- | ---------------------------------------- |
+| `hover`       | User is hovering their cursor over an item |
+| `visited`     | A link that was previously clicked       |
+| `link`        | An unvisited link                        |
 | `first-child` | The first child matching the selector in a hierarchy |
-| `last-child`  | The last child matching the selector in a hierarchy  |
+| `last-child`  | The last child matching the selector in a hierarchy |
 
 > [!IMPORTANT]
 > Using pseudo-elements and CSS, you can remove the underline from hyperlinks. As a general rule, it's best to leave the underline for accessibility purposes. The underlined text allows a user to quickly identify links on a page.
 
-## ID Selectors
+## ID selectors
 
 Similar to classes, an ID allows you to apply a style to an element. But, while a class can be applied to multiple elements, an ID must be unique and refer to only one element.
 

learn-pr/wwl-azure/use-css-styles/includes/6-exercise-selectors.md

@@ -2,33 +2,33 @@ In the prior exercise, you applied style to elements such as `html` and `h1`. Yo
 
 In this exercise, you set the style for the social media and experience sections and links on the page.
 
-## Applying Style to Classes and IDs
+## Applying style to classes and IDs
 
 You start by setting the style for the social media and experience sections.
 
 1. Return to the vscode.dev window you used in the previous exercise.
-1. Inside **index.html**, notice the `section` element with the ID of **social-media** at line 10; you apply style to this section to set the color to blue.
-1. At the end of **style.css**, add the following CSS to set the color for the **social-media** element:
+2. Inside **index.html**, notice the `section` element with the ID of **social-media** at line 10; you apply style to this section to set the color to blue.
+3. At the end of **style.css**, add the following CSS to set the color for the **social-media** element:
 
     ```css
     #social-media {
         color: blue;
     }
     ```
 
-1. The page updates, setting the content in the social media section to blue.
-1. Inside **index.html**, notice the two sections at lines 28 and 32 with the class **experience**; you apply style to these sections to italicize the font.
-1. At the end of **style.css**, add the following CSS to modify the font for the elements with the **experience** class:
+4. The page updates, setting the content in the social media section to blue.
+5. Inside **index.html**, notice the two sections at lines 28 and 32 with the class **experience**; you apply style to these sections to italicize the font.
+6. At the end of **style.css**, add the following CSS to modify the font for the elements with the **experience** class:
 
     ```css
     .experience {
         font-style: italic;
     }
     ```
 
-1. The page updates, setting the font inside experience to italicized.
+7. The page updates, setting the font inside experience to italicized.
 
-## Using Pseudo-classes to Set Link Style
+## Using pseudo-classes to set link style
 
 Many web developers change the color and style of hyperlinks on a page. You set the color for links to be green and highlight links when a user hovers over them.
 
@@ -44,16 +44,16 @@ Many web developers change the color and style of hyperlinks on a page. You set
     }
     ```
 
-1. The page updates to show links as green.
-1. Add the following CSS to the end of **style.css** to highlight links as they're being hovered over:
+2. The page updates to show links as green.
+3. Add the following CSS to the end of **style.css** to highlight links as they're being hovered over:
 
     ```css
     a:hover {
         background-color: yellow;
     }
     ```
 
-1. Hover over the links on the page and notice the links are highlighted.
+4. Hover over the links on the page and notice the links are highlighted.
 
 ## Review