4.1 KiB
4.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
bad87dee1348bd9aede07836 | Use an id Attribute to Style an Element | 0 | https://scrimba.com/c/cakyZfL |
Description
id
attributes is that, like classes, you can style them using CSS.
However, an id
is not reusable and should only be applied to one element. An id
also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id
will be applied.
Here's an example of how you can take your element with the id
attribute of cat-photo-element
and give it the background color of green. In your style
element:
#cat-photo-element {Note that inside your
background-color: green;
}
style
element, you always reference classes by putting a .
in front of their names. You always reference ids by putting a #
in front of their names.
Instructions
id
attribute of cat-photo-form
, a green background.
Tests
tests:
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
testString: assert($("form").attr("id") === "cat-photo-form", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');
- text: Your <code>form</code> element should have the <code>background-color</code> of green.
testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", 'Your <code>form</code> element should have the <code>background-color</code> of green.');
- text: Make sure your <code>form</code> element has an <code>id</code> attribute.
testString: assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.');
- text: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');
Challenge Seed
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<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="/submit-cat-photo" id="cat-photo-form">
<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>
Solution
// solution required