diff --git a/foundations/06-cascade-fix/README.md b/foundations/06-cascade-fix/README.md index 989a6eb..cd8981d 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: this exercise has had its style changed, for accessibility reasons. 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/index.html b/foundations/06-cascade-fix/index.html index 4b5777c..c1bc90e 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 bold text!

+

I'm a smaller paragraph, also with 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 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..a2dd683 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: 900; } .para { @@ -14,7 +19,8 @@ } div.text { - color: green; + color: rgb(0, 0, 0); + font-weight: 200; font-size: 22px; } @@ -38,6 +44,7 @@ div.text { .small-para { font-size: 14px; + font-weight: 900; } /* @@ -86,6 +93,7 @@ div.text { */ div .child { - color: red; + color: rgb(0, 0, 0); + font-weight: 900; font-size: 14px; } diff --git a/foundations/06-cascade-fix/solution/solution.html b/foundations/06-cascade-fix/solution/solution.html index c113940..2493937 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 bold text!

+

I'm a smaller paragraph, also with 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 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