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
 | 
			
		||||
 | 
			
		||||
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  -->
 | 
			
		||||
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