Merge pull request #2699 from bugron/bugron-2106
Changes CSS attributes to CSS properties
This commit is contained in:
Berkeley Martinez
@ -372,7 +372,7 @@
|
||||
"difficulty": 1.09,
|
||||
"description": [
|
||||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
|
||||
"With CSS, there are hundreds of CSS <code>attributes</code> that you can use to change the way an element looks on your page.",
|
||||
"With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
|
||||
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
|
||||
"At the top of your code, create a <code>style</code> element like this: <code><style></style></code>.",
|
||||
@ -544,7 +544,7 @@
|
||||
"description": [
|
||||
"Create a second <code>p</code> element with the following <code>kitty ipsum text</code>: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"Then, inside your <code><style></code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS property, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your <code>red-text</code> class."
|
||||
],
|
||||
"tests": [
|
||||
@ -595,7 +595,7 @@
|
||||
"difficulty": 1.14,
|
||||
"description": [
|
||||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font.",
|
||||
"You can set an element's font by using the <code>font-family</code> attribute.",
|
||||
"You can set an element's font by using the <code>font-family</code> property.",
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
|
||||
],
|
||||
"tests": [
|
||||
@ -645,7 +645,7 @@
|
||||
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
|
||||
"Copy the following code snippet and paste it into your code editor:",
|
||||
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>.",
|
||||
"Now you can set <code>Lobster</code> as a font-family attribute on your <code>h2</code> element."
|
||||
"Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')",
|
||||
@ -808,7 +808,7 @@
|
||||
"title": "Size your Images",
|
||||
"difficulty": 1.18,
|
||||
"description": [
|
||||
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>.",
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
|
||||
],
|
||||
@ -864,7 +864,7 @@
|
||||
"title": "Add Borders Around your Elements",
|
||||
"difficulty": 1.19,
|
||||
"description": [
|
||||
"CSS borders have attributes like <code>style</code>, <code>color</code> and <code>width</code>.",
|
||||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>.",
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>.",
|
||||
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo."
|
||||
],
|
||||
@ -927,8 +927,8 @@
|
||||
"title": "Add Rounded Corners with a Border Radius",
|
||||
"difficulty": 1.20,
|
||||
"description": [
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this property to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
|
||||
"Give your cat photo a <code>border-radius</code> of <code>10px</code>."
|
||||
],
|
||||
"tests": [
|
||||
@ -2355,7 +2355,7 @@
|
||||
"title": "Give a Background Color to a Div Element",
|
||||
"difficulty": 1.39,
|
||||
"description": [
|
||||
"You can set an element's background color with the <code>background-color</code> attribute.",
|
||||
"You can set an element's background color with the <code>background-color</code> property.",
|
||||
"For example, if you wanted an element's background color to be <code>green</code>, you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
|
||||
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
|
||||
],
|
||||
@ -2627,7 +2627,7 @@
|
||||
"difficulty": 1.40,
|
||||
"description": [
|
||||
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
|
||||
"Three important attributes control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
|
||||
"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 and its <code>border</code>.",
|
||||
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
|
||||
"When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
|
||||
@ -2839,7 +2839,7 @@
|
||||
"difficulty": 1.43,
|
||||
"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> attributes.",
|
||||
"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.",
|
||||
"Give the green 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."
|
||||
],
|
||||
"tests": [
|
||||
@ -2912,7 +2912,7 @@
|
||||
"description": [
|
||||
"Give the green 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.",
|
||||
"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> attributes."
|
||||
"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."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
|
||||
@ -2981,7 +2981,7 @@
|
||||
"title": "Use Clockwise Notation to Specify the Padding of an Element",
|
||||
"difficulty": 1.44,
|
||||
"description": [
|
||||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
|
||||
"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: <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.",
|
||||
"Use Clockwise Notation to give the \".green-box\" class 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."
|
||||
],
|
||||
@ -3051,7 +3051,7 @@
|
||||
"difficulty": 1.45,
|
||||
"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> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
|
||||
"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: <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.",
|
||||
"Use <code>Clockwise Notation</code> to give an element a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
@ -3163,8 +3163,8 @@
|
||||
"assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')",
|
||||
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> attribute of <code>green</code>.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> attribute of <code>Monospace</code>.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
|
||||
],
|
||||
@ -3198,7 +3198,7 @@
|
||||
"description": [
|
||||
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
|
||||
"For example, your <code>h1</code> 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 <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS attribute?",
|
||||
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS property?",
|
||||
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
|
||||
"Give your <code>h1</code> element the class of <code>pink-text</code>."
|
||||
],
|
||||
|
||||
@ -364,7 +364,7 @@
|
||||
"Select <code>target1</code> and change its color to red.",
|
||||
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
|
||||
"Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>",
|
||||
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon."
|
||||
"This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')",
|
||||
|
||||
Reference in New Issue
Block a user