tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #205 from Amandasilvbr/update-for-accessibility 

Cascade-fix: update for accessibility #188
This commit is contained in:
Daniel Murphy 2022-07-31 15:46:34 -04:00 committed by GitHub
parent 35adbf6686 8e45e85f04
commit 4c2d4a0678
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
foundations/06-cascade-fix/README.md
View File

@ -13,3 +13,5 @@ Issues with the cascade can be the bane of their existence for many when it come
### Self Check ### Self Check
- Did you make sure to not edit the HTML file? - Did you make sure to not edit the HTML file?
- If you added selectors to the CSS, do they target a valid HTML element? - 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._

BIN
foundations/06-cascade-fix/desired-outcome.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 19 KiB

12
foundations/06-cascade-fix/index.html
View File

@ -8,15 +8,15 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<p class="para">I'm just a paragraph with red text!</p> <p class="para">I'm just a paragraph with extra bold text!</p>
<p class="para small-para">I'm a smaller paragraph, also with red text!</p> <p class="para small-para">I'm a smaller paragraph, also with extra bold text!</p>
<button id="confirm-button" class="button confirm">Confirm</button> <button id="confirm-button" class="button confirm">Confirm</button>
<button id="cancel-button" class="button cancel">Cancel</button> <button id="cancel-button" class="button cancel">Cancel</button>
<div class="text">I'm a div with green text!</div> <div class="text">I'm a div with thin text!</div>
<div class="text">I'm a div with green text and a child div! <div class="text">I'm a div with thin text and a child div!
<div class="text child">I'm a smaller child div with red text.</div> <div class="text child">I'm a smaller child div with extra bold text.</div>
</div> </div>
</body> </body>
</html> </html>

14
foundations/06-cascade-fix/solution/solution.css
View File

@ -1,6 +1,11 @@
body{
font-family:Arial, Helvetica, sans-serif
}
.para, .para,
.small-para { .small-para {
color: hsl(0, 100%, 50%); color: hsl(0, 0%, 0%);
font-weight: 800;
} }
.para { .para {
@ -14,7 +19,8 @@
} }
div.text { div.text {
color: green; color: rgb(0, 0, 0);
font-weight: 100;
font-size: 22px; font-size: 22px;
} }
@ -38,6 +44,7 @@ div.text {
.small-para { .small-para {
font-size: 14px; font-size: 14px;
font-weight: 800;
} }
/* /*
@ -86,6 +93,7 @@ div.text {
*/ */
div .child { div .child {
color: red; color: rgb(0, 0, 0);
font-weight: 800;
font-size: 14px; font-size: 14px;
} }

12
foundations/06-cascade-fix/solution/solution.html
View File

@ -9,15 +9,15 @@
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<p class="para">I'm just a paragraph with red text!</p> <p class="para">I'm just a paragraph with extra bold text!</p>
<p class="para small-para">I'm a smaller paragraph, also with red text!</p> <p class="para small-para">I'm a smaller paragraph, also with extra bold text!</p>
<button id="confirm-button" class="button confirm">Confirm</button> <button id="confirm-button" class="button confirm">Confirm</button>
<button id="cancel-button" class="button cancel">Cancel</button> <button id="cancel-button" class="button cancel">Cancel</button>
<div class="text">I'm a div with green text!</div> <div class="text">I'm a div with thin text!</div>
<div class="text">I'm a div with green text and a child div! <div class="text">I'm a div with thin text and a child div!
<div class="text child">I'm a smaller child div with red text.</div> <div class="text child">I'm a smaller child div with extra bold text.</div>
</div> </div>
</body> </body>
</html> </html>

10
foundations/06-cascade-fix/style.css
View File

@ -1,6 +1,10 @@
body{
font-family:Arial, Helvetica, sans-serif
}
.para, .para,
.small-para { .small-para {
color: hsl(0, 100%, 50%); color: hsl(0, 0%, 0%);
} }
.small-para { .small-para {
@ -24,11 +28,11 @@
} }
.child { .child {
color: red; color: rgb(0, 0, 0);
font-size: 14px; font-size: 14px;
} }
div.text { div.text {
color: green; color: rgb(0, 0, 0);
font-size: 22px; font-size: 22px;
} }