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