diff --git a/foundations/06-cascade-fix/README.md b/foundations/06-cascade-fix/README.md index 989a6eb..a5e56ce 100644 --- a/foundations/06-cascade-fix/README.md +++ b/foundations/06-cascade-fix/README.md @@ -13,3 +13,5 @@ Issues with the cascade can be the bane of their existence for many when it come ### Self Check - Did you make sure to not edit the HTML file? - If you added selectors to the CSS, do they target a valid HTML element? + +_Note: for accessibility reasons, the style in this exercise has changed. For new and old students, we propose to carry out the exercise noting how important it is to pay attention to the accessibility of the web, and we encourage more and more practices like this._ diff --git a/foundations/06-cascade-fix/desired-outcome.png b/foundations/06-cascade-fix/desired-outcome.png index bcff976..44ebfa0 100644 Binary files a/foundations/06-cascade-fix/desired-outcome.png and b/foundations/06-cascade-fix/desired-outcome.png differ diff --git a/foundations/06-cascade-fix/index.html b/foundations/06-cascade-fix/index.html index 4b5777c..0c5b227 100644 --- a/foundations/06-cascade-fix/index.html +++ b/foundations/06-cascade-fix/index.html @@ -8,15 +8,15 @@ -

I'm just a paragraph with red text!

-

I'm a smaller paragraph, also with red text!

+

I'm just a paragraph with extra bold text!

+

I'm a smaller paragraph, also with extra bold text!

-
I'm a div with green text!
-
I'm a div with green text and a child div! -
I'm a smaller child div with red text.
+
I'm a div with thin text!
+
I'm a div with thin text and a child div! +
I'm a smaller child div with extra bold text.
- \ No newline at end of file + diff --git a/foundations/06-cascade-fix/solution/solution.css b/foundations/06-cascade-fix/solution/solution.css index c0ba21e..6f6085c 100644 --- a/foundations/06-cascade-fix/solution/solution.css +++ b/foundations/06-cascade-fix/solution/solution.css @@ -1,6 +1,11 @@ +body{ + font-family:Arial, Helvetica, sans-serif +} + .para, .small-para { - color: hsl(0, 100%, 50%); + color: hsl(0, 0%, 0%); + font-weight: 800; } .para { @@ -14,7 +19,8 @@ } div.text { - color: green; + color: rgb(0, 0, 0); + font-weight: 100; font-size: 22px; } @@ -38,6 +44,7 @@ div.text { .small-para { font-size: 14px; + font-weight: 800; } /* @@ -86,6 +93,7 @@ div.text { */ div .child { - color: red; + color: rgb(0, 0, 0); + font-weight: 800; font-size: 14px; } diff --git a/foundations/06-cascade-fix/solution/solution.html b/foundations/06-cascade-fix/solution/solution.html index c113940..4879272 100644 --- a/foundations/06-cascade-fix/solution/solution.html +++ b/foundations/06-cascade-fix/solution/solution.html @@ -9,15 +9,15 @@ -

I'm just a paragraph with red text!

-

I'm a smaller paragraph, also with red text!

+

I'm just a paragraph with extra bold text!

+

I'm a smaller paragraph, also with extra bold text!

-
I'm a div with green text!
-
I'm a div with green text and a child div! -
I'm a smaller child div with red text.
+
I'm a div with thin text!
+
I'm a div with thin text and a child div! +
I'm a smaller child div with extra bold text.
- \ No newline at end of file + diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css index 7ad1694..49ab576 100644 --- a/foundations/06-cascade-fix/style.css +++ b/foundations/06-cascade-fix/style.css @@ -1,6 +1,10 @@ +body{ + font-family:Arial, Helvetica, sans-serif +} + .para, .small-para { - color: hsl(0, 100%, 50%); + color: hsl(0, 0%, 0%); } .small-para { @@ -24,11 +28,11 @@ } .child { - color: red; + color: rgb(0, 0, 0); font-size: 14px; } div.text { - color: green; + color: rgb(0, 0, 0); font-size: 22px; } \ No newline at end of file