| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | --- | 
					
						
							|  |  |  | id: bad87fee1348bd9aedf08736 | 
					
						
							|  |  |  | title: Style the HTML Body Element | 
					
						
							|  |  |  | challengeType: 0 | 
					
						
							|  |  |  | videoUrl: 'https://scrimba.com/c/cB77PHW' | 
					
						
							| 
									
										
										
										
											2019-07-31 11:32:23 -07:00
										 |  |  | forumTopicId: 18313 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  | dashedName: style-the-html-body-element | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | # --description--
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | Now let's start fresh and talk about CSS inheritance. | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | Every HTML page has a `body` element. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | # --instructions--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | We can prove that the `body` element exists here by giving it a `background-color` of black. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | We can do this by adding the following to our `style` element: | 
					
						
							| 
									
										
										
										
											2019-05-14 01:11:58 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```css | 
					
						
							|  |  |  | body { | 
					
						
							|  |  |  |   background-color: black; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | # --hints--
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | Your `body` element should have the `background-color` of black. | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | ```js | 
					
						
							|  |  |  | assert($('body').css('background-color') === 'rgb(0, 0, 0)'); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Your CSS rule should be properly formatted with both opening and closing curly brackets. | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | ```js | 
					
						
							|  |  |  | assert( | 
					
						
							|  |  |  |   code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i) | 
					
						
							|  |  |  | ); | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | Your CSS rule should end with a semi-colon. | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | ```js | 
					
						
							|  |  |  | assert( | 
					
						
							|  |  |  |   code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i) | 
					
						
							|  |  |  | ); | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | # --seed--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## --seed-contents--
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <style> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </style> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-11-27 19:02:05 +01:00
										 |  |  | # --solutions--
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-22 01:57:43 -04:00
										 |  |  | ```html | 
					
						
							|  |  |  | <style> | 
					
						
							|  |  |  | body { | 
					
						
							|  |  |  |   background-color: black; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | </style> | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | ``` |