Responsive Web Design: Added hint to Prioritize One Style Over Another (#22020)
* Responsive Web Design: Added hint to Prioritize One Style Over Another Added hint to Prioritize One Style Over Another (https://guide.freecodecamp.org/certifications/responsive-web-design/basic-css/prioritize-one-style-over-another and https://learn.freecodecamp.org/responsive-web-design/basic-css/prioritize-one-style-over-another) * Added </style> in 23 line
This commit is contained in:
		
				
					committed by
					
						
						Christopher McCormack
					
				
			
			
				
	
			
			
			
						parent
						
							9cb3bc280d
						
					
				
				
					commit
					a33527523c
				
			@@ -3,8 +3,50 @@ title: Prioritize One Style Over Another
 | 
				
			|||||||
---
 | 
					---
 | 
				
			||||||
## Prioritize One Style Over Another
 | 
					## Prioritize One Style Over Another
 | 
				
			||||||
 | 
					
 | 
				
			||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/prioritize-one-style-over-another/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
 | 
					<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
 | 
				
			||||||
 | 
					We need to create a CSS class called ```pink-text``` that gives an our ```h1``` element the color pink.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### Solution
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  Between ```<style>``` and ```</style>``` create a class called ```pink-text```:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```css
 | 
				
			||||||
 | 
					  <style>
 | 
				
			||||||
 | 
					    body {
 | 
				
			||||||
 | 
					      background-color: black;
 | 
				
			||||||
 | 
					      font-family: monospace;
 | 
				
			||||||
 | 
					      color: green;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    .pink-text {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  </style>
 | 
				
			||||||
 | 
					  ```
 | 
				
			||||||
 | 
					  And add in this class ```color``` with value of ```pink```:
 | 
				
			||||||
 | 
					  
 | 
				
			||||||
 | 
					  ```css
 | 
				
			||||||
 | 
					  .pink-text {
 | 
				
			||||||
 | 
					    color: pink;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  ```
 | 
				
			||||||
 | 
					After, add this class to our ```h1``` element:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```css
 | 
				
			||||||
 | 
					<h1 class="pink-text">Hello World!</h1>
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### Full solution
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```css
 | 
				
			||||||
 | 
					<style>
 | 
				
			||||||
 | 
					  body {
 | 
				
			||||||
 | 
					    background-color: black;
 | 
				
			||||||
 | 
					    font-family: monospace;
 | 
				
			||||||
 | 
					    color: green;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .pink-text {
 | 
				
			||||||
 | 
					    color: pink;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					<h1 class="pink-text">Hello World!</h1>
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user