From b919b54558b7fc41473f3f555635426acdce6b84 Mon Sep 17 00:00:00 2001 From: Amanda Brunelli Date: Tue, 26 Jul 2022 08:50:43 -0300 Subject: [PATCH] Update for accessibility --- foundations/06-cascade-fix/README.md | 2 ++ foundations/06-cascade-fix/index.html | 10 +++++----- foundations/06-cascade-fix/solution/solution.css | 14 +++++++++++--- foundations/06-cascade-fix/solution/solution.html | 10 +++++----- foundations/06-cascade-fix/style.css | 10 +++++++--- 5 files changed, 30 insertions(+), 16 deletions(-) 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