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.