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

Fix issue for users with color blindness

This commit is contained in:
thatblindgeye 2022-01-16 15:07:45 -05:00
parent a3463cb99c
commit b9e8f56a9f
6 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
# CSS Methods # CSS Methods
This final exercise for CSS Foundations is going to give you a closer look at the cascade, in particular specificity and rule order. Both the HTML and CSS files are filled out for you, so instead of adding rules yourself, you will simply be editing what is provided. This final exercise for CSS Foundations is going to give you a closer look at the cascade, in particular specificity and rule order. Both the HTML and CSS files are filled out for you, so instead of adding rules yourself, you will simply be editing what is provided.
There are a few elements that have some sort of specificity or rule order issue in the provided CSS file. It's up to you to figure out what issue is affecting an element, and how to fix it. You can edit the CSS file by adding or removing selectors or moving stuff around, but you should not edit the HTML file or any of the actual style declarations in the CSS. There are a few elements that have some sort of specificity or rule order issue in the provided CSS file. It's up to you to figure out what issue is affecting an element, and how to fix it. You can edit the CSS file by adding, removing, or editing selectors for a declaration block, or by moving declaration blocks around. **You should not edit the HTML file or any of the actual styles in the CSS**.
There are multiple ways to solve this exercise, and we did our best to include all of the possible solutions for each element. There are multiple ways to solve this exercise, and we did our best to include all of the possible solutions for each element.

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 69 KiB

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 simple paragraph!</p> <p class="para">I'm just a paragraph with red text!</p>
<p class="para small-para">I'm a smaller paragraph!</p> <p class="para small-para">I'm a smaller paragraph, also with red 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 not related to those divs down there.</div> <div class="text">I'm a div with green text!</div>
<div class="text">I have a child! <div class="text">I'm a div with green text and a child div!
<div class="text child">My ancestor is so embarrassing.</div> <div class="text child">I'm a smaller child div with red text.</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -8,14 +8,14 @@
} }
.button { .button {
background-color: #ffc0cb; background-color: rgb(255, 255, 255);
color: black; color: rgb(0, 0, 0);
font-size: 20px; font-size: 20px;
} }
div.text { div.text {
color: green; color: green;
font-size: 28px; font-size: 22px;
} }
/* SOLUTION */ /* SOLUTION */
@ -24,7 +24,7 @@ div.text {
For the following rule, we removed it from its original position in the file: For the following rule, we removed it from its original position in the file:
.small-para { .small-para {
font-size: 12px; font-size: 14px;
} }
Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity. Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity.
@ -37,7 +37,7 @@ div.text {
*/ */
.small-para { .small-para {
font-size: 12px; font-size: 14px;
} }
/* /*
@ -46,7 +46,6 @@ div.text {
.confirm { .confirm {
background: green; background: green;
color: white; color: white;
font-size: 20px;
font-weight: bold; font-weight: bold;
} }
@ -57,7 +56,6 @@ div.text {
.button.confirm { .button.confirm {
background: green; background: green;
color: white; color: white;
font-size: 20px;
font-weight: bold; font-weight: bold;
} }
*/ */
@ -65,7 +63,6 @@ div.text {
#confirm-button { #confirm-button {
background: green; background: green;
color: white; color: white;
font-size: 20px;
font-weight: bold; font-weight: bold;
} }

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

@ -8,15 +8,15 @@
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<p class="para">I'm just a simple paragraph!</p> <p class="para">I'm just a paragraph with red text!</p>
<p class="para small-para">I'm a smaller paragraph!</p> <p class="para small-para">I'm a smaller paragraph, also with red 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 not related to those divs down there.</div> <div class="text">I'm a div with green text!</div>
<div class="text">I have a child! <div class="text">I'm a div with green text and a child div!
<div class="text child">My ancestor is so embarrassing.</div> <div class="text child">I'm a smaller child div with red text.</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -4,7 +4,7 @@
} }
.small-para { .small-para {
font-size: 12px; font-size: 14px;
} }
.para { .para {
@ -14,13 +14,12 @@
.confirm { .confirm {
background: green; background: green;
color: white; color: white;
font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.button { .button {
background-color: #ffc0cb; background-color: rgb(255, 255, 255);
color: black; color: rgb(0, 0, 0);
font-size: 20px; font-size: 20px;
} }
@ -31,5 +30,5 @@
div.text { div.text {
color: green; color: green;
font-size: 28px; font-size: 22px;
} }