From d8a398453bb97553e7b8120ec1b6207221970b0a Mon Sep 17 00:00:00 2001 From: Ariz Faiyaz Date: Wed, 15 Oct 2025 05:52:25 +0530 Subject: [PATCH] feat(curriculum): Add interactive examples to cascade algorithm lesson (#62799) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../672b8f23511adf25646b4236.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md index e1cbf1d94b5..96b6f88ea14 100644 --- a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md +++ b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-does-the-cascade-algorithm-work-at-a-high-level --- -# --description-- +# --interactive-- The Cascade Algorithm is the process the browser uses to decide which CSS rules to apply when there are multiple styles targeting the same element. It ensures that the most appropriate styles are used, based on a set of well-defined rules. @@ -27,14 +27,16 @@ This is why the order in which you write your styles can sometimes affect the ou Let's take a look at an example. -Here we have a single paragraph element on the page: +In the HTML file, there is a single paragraph element. Then inside the CSS, we have two rules, each targeting the paragraph element. + +:::interactive_editor ```html + +

example paragraph

``` -Inside the CSS, we have two rules each targeting the paragraph element. - ```css p { color: blue; @@ -45,6 +47,8 @@ p { } ``` +::: + The first rule sets all paragraph elements to the text color of blue while the second rule sets all paragraph elements to the text color of green. So which color will be applied? The color green will be applied to the paragraph elements.