---
id: bad87fee1348bd9aedf08756
title: Prioritize One Style Over Another
challengeType: 0
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
---
## Description
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?
## Instructions
Create a CSS class called pink-text
that gives an element the color pink.
Give your h1
element the class of pink-text
.
## Tests
```yml
tests:
- text: Your h1
element should have the class pink-text
.
testString: assert($("h1").hasClass("pink-text"), 'Your h1
element should have the class pink-text
.');
- text: Your <style>
should have a pink-text
CSS class that changes the color
.
testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), 'Your <style>
should have a pink-text
CSS class that changes the color
.');
- text: Your h1
element should be pink.
testString: assert($("h1").css("color") === "rgb(255, 192, 203)", 'Your h1
element should be pink.');
```
## Challenge Seed
## Solution
```js
// solution required
```