159 lines
4.3 KiB
Markdown
159 lines
4.3 KiB
Markdown
---
|
|
id: bad87fee1348bd9aedf08805
|
|
title: Use CSS Selectors to Style Elements
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
|
forumTopicId: 18349
|
|
dashedName: use-css-selectors-to-style-elements
|
|
---
|
|
|
|
# --description--
|
|
|
|
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:
|
|
|
|
```html
|
|
<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:
|
|
|
|
```html
|
|
<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.
|
|
|
|
# --instructions--
|
|
|
|
Delete your `h2` element's style attribute, and instead create a CSS `style` block. Add the necessary CSS to turn all `h2` elements blue.
|
|
|
|
# --hints--
|
|
|
|
The `style` attribute should be removed from your `h2` element.
|
|
|
|
```js
|
|
assert(!$('h2').attr('style'));
|
|
```
|
|
|
|
You should create a `style` element.
|
|
|
|
```js
|
|
assert($('style') && $('style').length >= 1);
|
|
```
|
|
|
|
Your `h2` element should be blue.
|
|
|
|
```js
|
|
assert($('h2').css('color') === 'rgb(0, 0, 255)');
|
|
```
|
|
|
|
Your stylesheet `h2` declaration should be valid with a semicolon and closing brace.
|
|
|
|
```js
|
|
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
|
```
|
|
|
|
All your `style` elements should be valid and have closing tags.
|
|
|
|
```js
|
|
assert(
|
|
code.match(/<\/style>/g) &&
|
|
code.match(/<\/style>/g).length ===
|
|
(
|
|
code.match(
|
|
/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
|
|
) || []
|
|
).length
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<h2 style="color: red;">CatPhotoApp</h2>
|
|
<main>
|
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
|
|
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
|
|
|
<div>
|
|
<p>Things cats love:</p>
|
|
<ul>
|
|
<li>cat nip</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><br>
|
|
<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><br>
|
|
<input type="text" placeholder="cat photo URL" required>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</main>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<style>
|
|
h2 {
|
|
color: blue;
|
|
}
|
|
</style>
|
|
<h2>CatPhotoApp</h2>
|
|
<main>
|
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
|
|
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
|
|
|
<div>
|
|
<p>Things cats love:</p>
|
|
<ul>
|
|
<li>cat nip</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><br>
|
|
<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><br>
|
|
<input type="text" placeholder="cat photo URL" required>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</main>
|
|
```
|