gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Small language updates, and fix for colour contrast - basic-css (#16851)

Browse Source
This commit is contained in:
Schalk Neethling
2018-03-09 18:16:55 +02:00
committed by Quincy Larson
parent 9ef7d8e405
commit 5d93e6d0c3
1 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
challenges/01-responsive-web-design/basic-css.json
View File

@ -1790,7 +1790,7 @@
"Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
"An element's <code>padding</code> controls the amount of space between the element's content and its <code>border</code>.",
"Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the blue box.",
"When you increase the blue box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
"When you increase the blue box's <code>padding</code>, it will increase the distance(<code>padding</code>) between the text and the border around it.",
"<hr>",
"Change the <code>padding</code> of your blue box to match that of your red box."
],
@ -1814,12 +1814,14 @@
" }",
" ",
" .red-box {",
" background-color: red;",
" background-color: crimson;",
" color: #fff;",
" padding: 20px;",
" }",
"",
" .blue-box {",
" background-color: blue;",
" color: #fff;",
" padding: 10px;",
" }",
"</style>",
@ -1895,7 +1897,7 @@
"title": "Adjust the Margin of an Element",
"description": [
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
"Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the blue box, making it appear smaller.",
"Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger <code>margin</code> than the blue box, making it appear smaller.",
"When you increase the blue box's <code>margin</code>, it will increase the distance between its border and surrounding elements.",
"<hr>",
"Change the <code>margin</code> of the blue box to match that of the red box."
@ -1920,13 +1922,15 @@
" }",
" ",
" .red-box {",
" background-color: red;",
" background-color: crimson;",
" color: #fff;",
" padding: 20px;",
" margin: 20px;",
" }",
"",
" .blue-box {",
" background-color: blue;",
" color: #fff;",
" padding: 20px;",
" margin: 10px;",
" }",
@ -2017,13 +2021,15 @@
" }",
" ",
" .red-box {",
" background-color: red;",
" background-color: crimson;",
" color: #fff;",
" padding: 20px;",
" margin: -15px;",
" }",
"",
" .blue-box {",
" background-color: blue;",
" color: #fff;",
" padding: 20px;",
" margin: 20px;",
" }",
@ -2087,8 +2093,8 @@
"id": "bad87fee1348bd9aedf08824",
"title": "Add Different Padding to Each Side of an Element",
"description": [
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
"Sometimes you will want to customize an element so that it has different amounts of <code>padding</code> on each of its sides.",
"CSS allows you to control the <code>padding</code> of all four individual sides of an element with the <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
"<hr>",
"Give the blue box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
],
@ -2112,7 +2118,8 @@
" }",
" ",
" .red-box {",
" background-color: red;",
" background-color: crimson;",
" color: #fff;",
" padding-top: 40px;",
" padding-right: 20px;",
" padding-bottom: 20px;",
@ -2121,6 +2128,7 @@
"",
" .blue-box {",
" background-color: blue;",
" color: #fff;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
@ -2183,7 +2191,7 @@
"title": "Add Different Margins to Each Side of an Element",
"description": [
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties.",
"CSS allows you to control the <code>margin</code> of all four individual sides of an element with the <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties.",
"<hr>",
"Give the blue box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
],
@ -2207,7 +2215,8 @@
" }",
" ",
" .red-box {",
" background-color: red;",
" background-color: crimson;",
" color: #fff;",
" margin-top: 40px;",
" margin-right: 20px;",
" margin-bottom: 20px;",
@ -2216,6 +2225,7 @@
"",
" .blue-box {",
" background-color: blue;",
" color: #fff;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
@ -2276,7 +2286,7 @@
"id": "bad87fee1348bd9aedf08826",
"title": "Use Clockwise Notation to Specify the Padding of an Element",
"description": [
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this:",
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties individually, you can specify them all in one line, like this:",
"<code>padding: 10px 20px 10px 20px;</code>",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
"<hr>",
@ -2302,12 +2312,14 @@
" }",
" ",
" .red-box {",
" background-color: red;",
" background-color: crimson;",
" color: #fff;",
" padding: 20px 40px 20px 40px;",
" }",
"",
" .blue-box {",
" background-color: blue;",
" color: #fff;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
@ -2374,7 +2386,7 @@
"title": "Use Clockwise Notation to Specify the Margin of an Element",
"description": [
"Let's try this again, but with <code>margin</code> this time.",
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this:",
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties individually, you can specify them all in one line, like this:",
"<code>margin: 10px 20px 10px 20px;</code>",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
"<hr>",
@ -2400,12 +2412,14 @@
" }",
" ",
" .red-box {",
" background-color: red;",
" background-color: crimson;",
" color: #fff;",
" margin: 20px 40px 20px 40px;",
" }",
"",
" .blue-box {",
" background-color: blue;",
" color: #fff;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",