| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Override Class Declarations with Inline Styles | 
					
						
							|  |  |  | --- | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | # Override Class Declarations with Inline Styles
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | --- | 
					
						
							|  |  |  | ## Problem Explanation
 | 
					
						
							| 
									
										
										
										
											2018-11-18 02:41:39 +04:00
										 |  |  | We need to use an ```inline style``` to try to make our ```h1``` element white. | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | **Example:** | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-11-18 02:41:39 +04:00
										 |  |  | Inline styles look like this: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```css | 
					
						
							|  |  |  | <h1 style="color: green;"> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | **NOTE:** An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Solutions
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details><summary>Solution 1 (Click to Show/Hide)</summary> | 
					
						
							| 
									
										
										
										
											2018-11-18 02:41:39 +04:00
										 |  |  | 
 | 
					
						
							|  |  |  | In this line: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```css | 
					
						
							|  |  |  | <h1 id="orange-text" class="pink-text blue-text">Hello World!</h1> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | In opening tag ```<h1>``` we need to add ```inline style``` to make our ```h1``` element white: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```css | 
					
						
							|  |  |  | <h1 style="color: white;" id="orange-text" class="pink-text blue-text">Hello World!</h1> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | </details> |