diff --git a/foundations/06-cascade-fix/README.md b/foundations/06-cascade-fix/README.md index ddd73c9..989a6eb 100644 --- a/foundations/06-cascade-fix/README.md +++ b/foundations/06-cascade-fix/README.md @@ -1,7 +1,7 @@ # 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. -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. diff --git a/foundations/06-cascade-fix/desired-outcome.png b/foundations/06-cascade-fix/desired-outcome.png index d4685d6..bcff976 100644 Binary files a/foundations/06-cascade-fix/desired-outcome.png and b/foundations/06-cascade-fix/desired-outcome.png differ diff --git a/foundations/06-cascade-fix/index.html b/foundations/06-cascade-fix/index.html index ca6aa5b..3471bfa 100644 --- a/foundations/06-cascade-fix/index.html +++ b/foundations/06-cascade-fix/index.html @@ -8,15 +8,15 @@ -

I'm just a simple paragraph!

-

I'm a smaller paragraph!

+

I'm just a paragraph with red text!

+

I'm a smaller paragraph, also with red text!

-
I'm not related to those divs down there.
-
I have a child! -
My ancestor is so embarrassing.
+
I'm a div with green text!
+
I'm a div with green text and a child div! +
I'm a smaller child div with red text.
\ No newline at end of file diff --git a/foundations/06-cascade-fix/solution/solution.css b/foundations/06-cascade-fix/solution/solution.css index 44bee02..7242ee3 100644 --- a/foundations/06-cascade-fix/solution/solution.css +++ b/foundations/06-cascade-fix/solution/solution.css @@ -8,14 +8,14 @@ } .button { - background-color: #ffc0cb; - color: black; + background-color: rgb(255, 255, 255); + color: rgb(0, 0, 0); font-size: 20px; } div.text { color: green; - font-size: 28px; + font-size: 22px; } /* SOLUTION */ @@ -24,7 +24,7 @@ div.text { For the following rule, we removed it from its original position in the file: .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. @@ -37,7 +37,7 @@ div.text { */ .small-para { - font-size: 12px; + font-size: 14px; } /* @@ -46,7 +46,6 @@ div.text { .confirm { background: green; color: white; - font-size: 20px; font-weight: bold; } @@ -57,7 +56,6 @@ div.text { .button.confirm { background: green; color: white; - font-size: 20px; font-weight: bold; } */ @@ -65,7 +63,6 @@ div.text { #confirm-button { background: green; color: white; - font-size: 20px; font-weight: bold; } @@ -90,4 +87,4 @@ div.text { div .child { color: red; font-size: 14px; -} \ No newline at end of file +} diff --git a/foundations/06-cascade-fix/solution/solution.html b/foundations/06-cascade-fix/solution/solution.html index 27ac65a..18f0303 100644 --- a/foundations/06-cascade-fix/solution/solution.html +++ b/foundations/06-cascade-fix/solution/solution.html @@ -8,15 +8,15 @@ -

I'm just a simple paragraph!

-

I'm a smaller paragraph!

+

I'm just a paragraph with red text!

+

I'm a smaller paragraph, also with red text!

-
I'm not related to those divs down there.
-
I have a child! -
My ancestor is so embarrassing.
+
I'm a div with green text!
+
I'm a div with green text and a child div! +
I'm a smaller child div with red text.
\ No newline at end of file diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css index 9965754..7ad1694 100644 --- a/foundations/06-cascade-fix/style.css +++ b/foundations/06-cascade-fix/style.css @@ -4,7 +4,7 @@ } .small-para { - font-size: 12px; + font-size: 14px; } .para { @@ -14,13 +14,12 @@ .confirm { background: green; color: white; - font-size: 20px; font-weight: bold; } .button { - background-color: #ffc0cb; - color: black; + background-color: rgb(255, 255, 255); + color: rgb(0, 0, 0); font-size: 20px; } @@ -31,5 +30,5 @@ div.text { color: green; - font-size: 28px; + font-size: 22px; } \ No newline at end of file