fix(curriculum): update HSL lecture to use modern space-separated syntax (#67220)

curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc523324694be91d90d96.md

@@ -17,7 +17,15 @@ Saturation refers to the intensity or purity of the color. It is measured as a p
 
 Lightness determines how light or dark the color is, again measured as a percentage. A lightness value of `0%` will produce black, `50%` will give you the normal tone of the hue, and `100%` will result in white.
 
-In CSS, the `hsl()` function is used to define colors using the HSL color model. Here is the basic syntax:
+In CSS, the `hsl()` function is used to define colors using the HSL color model. The modern syntax uses space-separated values:
+
+```css
+element {
+  color: hsl(hue saturation lightness);
+}
+```
+
+You may also encounter the older comma-separated syntax in existing code, which is still supported by browsers:
 
 ```css
 element {
@@ -36,11 +44,11 @@ Let's break this down with an example:
 
 ```css
 body {
-  background-color: hsla(0, 0%, 1%, 1.00);
+  background-color: hsl(0 0% 1% / 1);
 }
 
 p {
-  color: hsl(120, 100%, 50%);
+  color: hsl(120 100% 50%);
 }
 ```
 
@@ -62,12 +70,12 @@ For instance, if you want to create different shades or tints of the same color,
 
 ```css
 div.light {
-  background-color: hsl(240, 100%, 80%);
+  background-color: hsl(240 100% 80%);
 }
 
 div.dark {
-  background-color: hsl(240, 100%, 20%);
-  color: hsl(0, 0%, 100%);
+  background-color: hsl(240 100% 20%);
+  color: hsl(0 0% 100%);
 }
 ```
 
@@ -75,11 +83,11 @@ div.dark {
 
 Here, both `div` elements are using the same hue (`240` degrees, which is blue), but one has a lightness of `80%` (a lighter shade of blue), and the other has a lightness of `20%` (a darker shade of blue).
 
-Just like the RGB model has an `rgba()` function to include transparency, the HSL model has an `hsla()` function. The fourth parameter in this function represents the alpha value, which controls the opacity of the color. Here is the basic syntax:
+Just like the RGB model, the `hsl()` function also supports an optional alpha value to control transparency. You add it after a `/` separator as a fourth parameter. Here is the basic syntax:
 
 ```css
 element {
-  background-color: hsla(hue, saturation, lightness, alpha);
+  background-color: hsl(hue saturation lightness / alpha);
 }
 ```
 
@@ -94,13 +102,23 @@ Let's take a look at an example:
 
 ```css
 div {
-  background-color: hsla(0, 100%, 50%, 0.5);
+  background-color: hsl(0 100% 50% / 0.5);
 }
 ```
 
 :::
 
-This code would give the `div` a semi-transparent red background, where the hue is set to `0` degrees (red), saturation is `100%`, lightness is `50%`, and alpha is `0.5` (50% opacity). You can also specify the alpha as a percentage — for example, `hsla(0, 100%, 50%, 50%)` is equivalent to `hsla(0, 100%, 50%, 0.5)`.
+This code would give the `div` a semi-transparent red background, where the hue is set to `0` degrees (red), saturation is `100%`, lightness is `50%`, and alpha is `0.5` (50% opacity). You can also specify the alpha as a percentage — for example, `hsl(0 100% 50% / 50%)` is equivalent to `hsl(0 100% 50% / 0.5)`.
+
+You will also commonly see the `hsla()` function in existing CSS. This was the original way to include transparency in HSL colors, using comma-separated values:
+
+```css
+element {
+  background-color: hsla(hue, saturation, lightness, alpha);
+}
+```
+
+For example, `hsla(0, 100%, 50%, 0.5)` is the legacy equivalent of `hsl(0 100% 50% / 0.5)`. Both are supported by browsers, but the modern `hsl()` syntax with the `/` separator is now preferred.
 
 The HSL color model is particularly useful when you need to create color schemes and adjust shades or tints easily. 
 
@@ -190,11 +208,11 @@ How would you make a color semi-transparent using the HSL model?
 
 ## --answers--
 
-By using `hsla()` and adjusting the alpha value.
+By using `hsl()` with a `/` separator and an alpha value.
 
 ---
 
-By lowering the lightness value in the `hsl()` function/
+By lowering the lightness value in the `hsl()` function.
 
 ### --feedback--