div Auszeichnung überhalb des p Elements von \"Things cats love\" und das schließende div unterhalb der schließenden ol Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines div."
]
},
+ {
+ "id": "bad87fed1348bd9aede07836",
+ "name": "Waypoint: Give a Background Color to a Div Element",
+ "dashedName": "waypoint-give-a-background-color-to-a-div-element",
+ "difficulty": 0.039,
+ "description": [
+ "You can set an element's background color with the \"background-color\" attribute.",
+ "For example, if you wanted an element's background color to be \"green\", you'd use .green-background { background-color: green; } within your style element.",
+ "Create a class called \"gray-background\" with the background color of gray. Assign this class to your div element."
+ ],
+ "tests": [
+ "assert($('div').hasClass('gray-background'), 'Give your div element the class \"gray-background\".')",
+ "assert($('.gray-background').css('background-color') === 'rgb(128, 128, 128)', 'Your div element should have a gray background.')"
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "",
+ "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "div Element hinzu.",
+ "Du kannst die Hintergrund-Farbe eines Elements mit der Eigenschaft \"background-color\" bestimmen.",
+ "Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du .green-background { background-color: green; } innerhalb deines style Elements verwenden."
+ ]
+ },
{
"id": "bad87fee1348bd9aede07836",
"name": "Waypoint: Give a Background Color to a Div Element",
@@ -2407,6 +2498,184 @@
"Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du .green-background { background-color: green; } innerhalb deines style Elements verwenden."
]
},
+ {
+ "id": "bad87eee1348bd9aede07836",
+ "name": "Waypoint: Set the ID of an Element",
+ "dashedName": "waypoint-set-the-id-of-an-element",
+ "difficulty": 0.0391,
+ "description": [
+ "In addition to classes, each HTML element can also have an id attribute.",
+ "There are several benefits to using id attributes, and you'll learn more about them once you start using jQuery.",
+ "id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.",
+ "Here's an example of how you give your h2 element the id of \"cat-photo-app\": <ul id=\"cat-photo-app\">",
+ "Give your form element the id \"cat-photo-form\"."
+ ],
+ "tests": [
+ "assert($('form').attr('id') === 'cat-photo-form', 'Give your form element the id of \"cat-photo-form\".')"
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "",
+ "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "id attributes is that, like classes, you can style them using CSS.",
+ "Here's an example of how you can take your element with the id attribute of \"cat-photo-element\" and give it the background color of green. In your style element: #cat-photo-element { background-color: green; }>",
+ "Note that inside your style element, you always reference classes by putting a \".\" in front of their names. You always reference ids by putting a \"#\" in front of their names.",
+ "Try giving your form, which now has the id attribute of \"cat-photo-form\", a green background."
+ ],
+ "tests": [
+ "assert($('form').attr('id') === 'cat-photo-form', 'Give your form element the id of \"cat-photo-form\".')",
+ "assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)', 'Your form element should have the \"background-color\" of green.')",
+ "assert(editor.match(/form element has both an id attribute.')",
+ "assert(!editor.match(/form any class or style attributes.')"
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "",
+ "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "h1 element can't be both green and pink at the same time.",
+ "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class \"override\" the body element's color: green; CSS attribute?",
"Create a CSS class called \"pink-text\" that gives an element the color pink.",
"Give your h1 element the class of \"pink-text\"."
],
@@ -3021,8 +3293,10 @@
"dashedName": "waypoint-override-styles-in-subsequent-css",
"difficulty": 0.049,
"description": [
- "HTML has an element that is automatically a part of every web page called the body element.",
- "You can style your body element just like any other HTML element, and all your other elements will inherit your body element's styles."
+ "Our \"pink-text\" class overrode our body element's CSS declaration!",
+ "We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our \"pink-text\" class?",
+ "Create an additional CSS class called \"blue-text\" that gives an element the color blue. Make sure it's below your \"pink-text\" class declaration.",
+ "Apply the \"blue-text\" class to your h1 element in addition to your \"pink-text\" class, and let's see which one wins."
],
"tests": [
"assert($('h1').hasClass('pink-text'), 'Your h1 element should have the class \"pink-text\".')",
@@ -3034,7 +3308,7 @@
" body {",
" background-color: black;",
" font-family: Monospace;",
- " color: red;",
+ " color: green;",
" }",
" .pink-text {",
" color: pink;",
@@ -3062,7 +3336,10 @@
"dashedName": "waypoint-override-class-declarations-with-inline-styles",
"difficulty": 0.052,
"description": [
- "<h1 style=\"color: white\"&rt;"
+ "We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.",
+ "But we're not done yet. There are other ways that you can override CSS. Do you remember inline styles?",
+ "Use an in-line style to try to make our h1 element white. Remember, in line styles look like this: <h1 style=\"color: green\">",
+ "Leave the \"blue-text\" and \"pink-text\" classes on your h1 element."
],
"tests": [
"assert($('h1').hasClass('pink-text'), 'Your h1 element should have the class \"pink-text\".')",
@@ -3075,7 +3352,7 @@
" body {",
" background-color: black;",
" font-family: Monospace;",
- " color: red;",
+ " color: green;",
" }",
" .pink-text {",
" color: pink;",
@@ -3106,20 +3383,25 @@
"dashedName": "waypoint-override-all-other-styles-by-using-important",
"difficulty": 0.053,
"description": [
- ".pink-text { color: pink !important; }"
+ "Yay! we just proved that in-line styles will override the CSS declarations in your style element.",
+ "But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
+ "In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important.",
+ "Let's go all the way back to our body declaration. This was the weakest of all, being overridden by class declarations, id declarations, and in-line styles.",
+ "Add the keyword !important to your body' element's color declaration to make 100% sure that your h1 element will be green.",
+ "An example of how to do this is: color: red !important;"
],
"tests": [
"assert($('h1').hasClass('pink-text'), 'Your h1 element should have the class \"pink-text\".')",
"assert($('h1').hasClass('blue-text'), 'Your h1 element should have the class \"blue-text\".')",
"assert(!$('h1').hasClass('white-text'), 'Your h1 element should have the inline style of \"color: white\".')",
- "assert($('h1').css('color') === 'rgb(255, 192, 203)', 'Your h1 element should be pink.')"
+ "assert($('h1').css('color') === 'rgb(0, 192, 0)', 'Your h1 element should be green.')"
],
"challengeSeed": [
"