Sometimes your HTML elements will receive multiple styles that conflict with one another.
For example, your <code>h1</code> 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 <em>override</em> the <code>body</code> element's <code>color: green;</code> CSS property?
</section>
## Instructions
<sectionid='instructions'>
Create a CSS class called <code>pink-text</code> that gives an element the color pink.
Give your <code>h1</code> element the class of <code>pink-text</code>.
testString: assert($("h1").hasClass("pink-text"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');
- text: Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.
testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), 'Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.');