Prioritize One Style Over Another
Sometimes your HTML elements will receive multiple styles that conflict with one another.
For example, your h1
element can’t be both green and pink at the same time.
Let’s see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body
element’s color: green;
CSS property?
Create a CSS class called pink-text
that gives an element the color pink.
Give your h1
element the class of pink-text
.
**Your code so far**
<style>
.pink-text{color:pink;}
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1 class:"pink-text">Hello World!</h1>
Answer
Your `h1` element should have the class `pink-text` .
Your `<style>` should have a `pink-text` CSS class that changes the `color` .
Your `h1` element should be pink.
my Code:
<style>
.pink-text{color:pink;}
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1 class:"pink-text">Hello World!</h1>
not accepting Answer
**Your browser information:**
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0</code>
**Challenge:** Prioritize One Style Over Another
**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/prioritize-one-style-over-another