curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08805.md
With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.
When you entered <h2 style="color: red;">CatPhotoApp</h2>, you were styling that individual h2 element with inline CSS, which stands for Cascading Style Sheets.
That's one way to specify the style of an element, but there's a better way to apply CSS.
At the top of your code, create a style block like this:
<style>
</style>
Inside that style block, you can create a <dfn>CSS selector</dfn> for all h2 elements. For example, if you wanted all h2 elements to be red, you would add a style rule that looks like this:
<style>
h2 {
color: red;
}
</style>
Note that it's important to have both opening and closing curly braces ({ and }) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.
Delete your h2 element's style attribute, and instead create a CSS style block. Add the necessary CSS to turn all h2 elements blue.
The style attribute should be removed from your h2 element.
assert.notExists(document.querySelector('h2').getAttribute('style'));
You should create a style element.
assert.exists(document.querySelector('style:not(.fcc-hide-header)'));
assert.isAtLeast(document.querySelectorAll('style:not(.fcc-hide-header)').length, 1);
Your h2 element should be blue.
const h2Element = document.querySelector('h2');
const color = window.getComputedStyle(h2Element)['color'];
assert.strictEqual(color, 'rgb(0, 0, 255)');
Your stylesheet h2 declaration should be valid with a semicolon and closing brace.
assert.match(__helpers.removeCssComments(code), /h2\s*\{\s*color\s*:.*;\s*\}/g);
All your style elements should be valid and have closing tags.
assert.match(__helpers.removeHtmlComments(code), /<\/style>/g);
const closingElementLength = __helpers.removeHtmlComments(code).match(/<\/style>/g).length;
const openingElementsLength = __helpers.removeHtmlComments(code).match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g).length;
assert.strictEqual(closingElementLength, openingElementsLength);
<h2 style="color: red;">CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"></a>
<div>
<p>Things cats love:</p>
<ul>
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
<style>
h2 {
color: blue;
}
</style>
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"></a>
<div>
<p>Things cats love:</p>
<ul>
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>