{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/css/fcc-challenge-36-give-a-background-color-to-a-div-element/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"f4e0615a-f981-5e1d-8295-c40bae50f1c8","excerpt":"In Free Code Camp Challenge 36 we learn to set a background color to a div element. You can set an element’s background color with the background-color property…","html":"<p>In <a href=\"https://www.freecodecamp.com/challenges/give-a-background-color-to-a-div-element\">Free Code Camp Challenge 36</a> we learn to set a background color to a div element.</p>\n<blockquote>\n<p>You can set an element’s background color with the background-color property.</p>\n<p>For example, if you wanted an element’s background color to be green, you’d put this within your style element:</p>\n</blockquote>\n<blockquote>\n<p>[css]</p>\n</blockquote>\n<blockquote>\n<p>.green-background {</p>\n</blockquote>\n<blockquote>\n<p>background-color: green;</p>\n</blockquote>\n<blockquote>\n<p>}</p>\n</blockquote>\n<blockquote>\n<p>[/css]</p>\n</blockquote>\n<blockquote>\n<p>Create a class called silver-background with the background-color of silver. Assign this class to your div element.</p>\n</blockquote>\n<p>The original code is below:</p>\n<p>[css]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p>Click here for <a href=\"#\">cat photos</a>.</p>\n<p><a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a></p>\n<div>\n    \n<p>Things cats love:</p>\n    \n<ul>\n      \n<li>cat nip</li>\n      \n<li>laser pointers</li>\n      \n<li>lasagna</li>\n    \n</ul>\n    \n<p>Top 3 things cats hate:</p>\n    \n<ol>\n      \n<li>flea treatment</li>\n      \n<li>thunder</li>\n      \n<li>other cats</li>\n    \n</ol>\n  \n</div>\n<form action=\"/submit-cat-photo\">\n    \n<label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>\n    \n<label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>\n    \n<label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>\n    \n<label><input type=\"checkbox\" name=\"personality\"> Lazy</label>\n    \n<label><input type=\"checkbox\" name=\"personality\"> Energetic</label>\n    \n<input type=\"text\" placeholder=\"cat photo URL\" required>\n    \n<button type=\"submit\">Submit</button>\n  \n</form>\n  \n[/css]\n<p>The updated code with background color for the div element is below:</p>\n<p>[css highlight=”27-29,38″]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n<p>.silver-background {</p>\n<p>background-color: silver;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p>Click here for <a href=\"#\">cat photos</a>.</p>\n<p><a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a></p>\n<div class=\"silver-background\">\n    \n<p>Things cats love:</p>\n    \n<ul>\n      \n<li>cat nip</li>\n      \n<li>laser pointers</li>\n      \n<li>lasagna</li>\n    \n</ul>\n    \n<p>Top 3 things cats hate:</p>\n    \n<ol>\n      \n<li>flea treatment</li>\n      \n<li>thunder</li>\n      \n<li>other cats</li>\n    \n</ol>\n  \n</div>\n<form action=\"/submit-cat-photo\">\n    \n<label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>\n    \n<label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>\n    \n<label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>\n    \n<label><input type=\"checkbox\" name=\"personality\"> Lazy</label>\n    \n<label><input type=\"checkbox\" name=\"personality\"> Energetic</label>\n    \n<input type=\"text\" placeholder=\"cat photo URL\" required>\n    \n<button type=\"submit\">Submit</button>\n  \n</form>\n  \n[/css]","frontmatter":{"title":"FCC Challenge 36: Give a Background Color to a Div Element","date":"March 15, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/css/fcc-challenge-36-give-a-background-color-to-a-div-element/","previous":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-35-nest-many-elements-within-a-single-div-element/"},"frontmatter":{"title":"FCC Challenge 35: Nest Many Elements within a Single Div Element"}},"next":{"fields":{"slug":"/guides/es6-linting-with-gulp/"},"frontmatter":{"title":"ES6 Linting With Gulp"}}}}}