curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9bedf08813.md
CSS borders have properties like style, color and width.
For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.
Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example:
Your img element should have the class smaller-image.
assert.isTrue(document.querySelector('img').classList.contains('smaller-image'));
Your img element should have the class thick-green-border.
assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
Your image should have a border width of 10px.
// Note: to any future maintainers, the read width of the border is dependent on
// the zoom. For example we cannot match 10px exactly because if a campers set the zoom to 110%
// it will be read as 9~px.
const image = document.querySelector('img');
const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"];
const widthNumber = parseInt(imageBorderTopWidth);
assert.isAtLeast(widthNumber, 8);
assert.isAtMost(widthNumber, 12);
Your image should have a border style of solid.
const image = document.querySelector('img');
const borderRightStyle = window.getComputedStyle(image)["border-right-style"];
assert.strictEqual(borderRightStyle, 'solid');
The border around your img element should be green.
const image = document.querySelector('img');
const borderLeftColor = window.getComputedStyle(image)["border-left-color"];
assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)');
<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;
}
.smaller-image {
width: 100px;
}
</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="#"></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>
<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;
}
.smaller-image {
width: 100px;
}
.thick-green-border {
border-width: 10px;
border-color: green;
border-style: solid;
}
</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="#"></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>