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

Update for accessibility

Browse source
This commit is contained in:
Amanda Brunelli 2022-07-26 08:50:43 -03:00
parent 35adbf6686
commit b919b54558
5 changed files with 30 additions and 16 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: 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._

10
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 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 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 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: 900;
} }
.para { .para {
@ -14,7 +19,8 @@
} }
div.text { div.text {
color: green; color: rgb(0, 0, 0);
font-weight: 200;
font-size: 22px; font-size: 22px;
} }
@ -38,6 +44,7 @@ div.text {
.small-para { .small-para {
font-size: 14px; font-size: 14px;
font-weight: 900;
} }
/* /*
@ -86,6 +93,7 @@ div.text {
*/ */
div .child { div .child {
color: red; color: rgb(0, 0, 0);
font-weight: 900;
font-size: 14px; font-size: 14px;
} }

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