punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Cascade-fix: update for accessibility #188
This commit is contained in:
Daniel Murphy 2022-07-31 15:46:34 -04:00 committed by GitHub
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
- 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._

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

10
foundations/06-cascade-fix/index.html
View file

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

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

@ -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;
}

10
foundations/06-cascade-fix/solution/solution.html
View file

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

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

@ -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;
}