jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-09 12:00:37 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to cascade algorithm lesson (#62799)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Ariz Faiyaz
2025-10-15 05:52:25 +05:30
committed by GitHub
parent 3a4872de3a
commit d8a398453b
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8f23511adf25646b4236.md
View File

@@ -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
<link rel="stylesheet" href="styles.css">
<p>example paragraph</p>
```
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.