Add solutions and templates for final exercise
This commit is contained in:
thatblindgeye
parent
2d28ef122a
commit
1401f2e477
|
|
@ -1,15 +1,15 @@
|
|||
# CSS Methods
|
||||
This final exercise for CSS Foundations is going to get you a little more comfortable with the cascade, specificity and rule order in particular. 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, specificity and rule order in particular. 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 several elements that have some sort of specificity or rule order issue in the provided CSS file. Each element that you must fix will contain text that tells you how to fix the issue, either "Fix specificity" or "Fix rule order".
|
||||
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 of the actual style declarations in the CSS.
|
||||
|
||||
Specificity issues will require you to either add or remove a selector from an already existing rule, while rule order issues will require you to remove an entire rule from its current position and place it at the end of the CSS file in a particular order.
|
||||
There are multiple ways to solve this exercise, and we did our best to include all of the possible solutions for each element.
|
||||
|
||||
Issues with the cascade can be the bane for many when it comes to CSS, so once you complete this exercise you'll be one step ahead of the curve and on your way to loving CSS (or at the very least being friendly acquaintances with it).
|
||||
Issues with the cascade can be the bane for many when it comes to CSS, and while you won't be an expert from this exercise alone and there are other ways to deal with these issues, it is still super helpful to see how these issues affect our final styles and why its important to order rules carefully.
|
||||
|
||||
## Desired Outcome
|
||||
<!-- Insert Outcome Image -->
|
||||
|
||||
### Self Check
|
||||
- Do all rules for elements labeled "Fix specificity" have the correct selector added or removed?
|
||||
- Are all rules for elements labeled "Fix rule order" placed at the end of the CSS file and in the correct order?
|
||||
- Did you make sure to not edit the HTML file?
|
||||
- If you added selectors to the CSS, do they target a valid HTML element?
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fix the Cascade</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a simple paragraph!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph!</p>
|
||||
|
||||
<button id="confirm-button" class="button confirm">Confirm</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 have a child!
|
||||
<div class="text child">My ancestor is so embarrassing.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
.para,
|
||||
.small-para {
|
||||
color: hsl(0, 100%, 50%);
|
||||
}
|
||||
|
||||
.para {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #ffc0cb;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
div.text {
|
||||
color: green;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
/*
|
||||
For the following rule, we removed it from its original position in the file:
|
||||
|
||||
.small-para {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity.
|
||||
|
||||
Another solution would be keeping it in its original place and just chaining selectors, giving this rule a higher specificity:
|
||||
|
||||
p.small-para {
|
||||
font-size: 12px;
|
||||
}
|
||||
*/
|
||||
|
||||
.small-para {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
For the following rule we removed the original .confirm selector:
|
||||
|
||||
.confirm {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
Then we used an ID selector instead, since it has a higher specificity than the .button selector.
|
||||
|
||||
Other solutions would be to simply move the .confirm rule below the .button rule, or to use the .button.confirm selector without moving it:
|
||||
|
||||
.button.confirm {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
*/
|
||||
|
||||
#confirm-button {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
For the following rule we first removed it from its original position in the file:
|
||||
|
||||
.child {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Then we added another selector to create a descendant combinator. If we only created a descendant combinator, the specificity would be tied with the div.text selector and it would come down to rule order, and if we only moved it the div.text selector would still have a higher specificity.
|
||||
|
||||
Another solution would be to keep the rule where it was and just replace the div selector with the .text selector:
|
||||
|
||||
.text .child {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
}
|
||||
*/
|
||||
|
||||
div .child {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fix the Cascade</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a simple paragraph!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph!</p>
|
||||
|
||||
<button id="confirm-button" class="button confirm">Confirm</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 have a child!
|
||||
<div class="text child">My ancestor is so embarrassing.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
.para,
|
||||
.small-para {
|
||||
color: hsl(0, 100%, 50%);
|
||||
}
|
||||
|
||||
.small-para {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.para {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #ffc0cb;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.child {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div.text {
|
||||
color: green;
|
||||
font-size: 28px;
|
||||
}
|
||||
Loading…
Reference in New Issue