Test your skills: Images and form elements
The aim of this skill test is to assess whether you understand how special elements like images, media and form elements are treated in CSS.
Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.
Task 1
In this task, you have an image that is overflowing the box. We want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped. Update the CSS to achieve this.
Your final result should look like the image below:
<div class="box">
<img
alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
.box {
border: 5px solid black;
width: 400px;
height: 200px;
}
img {
/* Add styles here */
}
Click here to show the solution
It is ok if some parts of the image are cropped.
Using object-fit: cover is the best choice, you also need to set the width and height to 100%:
img {
height: 100%;
width: 100%;
object-fit: cover;
}
Task 2
In this task, you have a basic form.
To complete the task:
- Use attribute selectors to target the search field and button inside
.my-form. - Make the form field and button use the same text size as the rest of the form.
- Give the form field and button
10pxof padding. - Give the button a background of
rebeccapurple, white foreground, no border and rounded corners of 5px.
Your final result should look like the image below:
<form action="" class="my-form" method="post">
<div>
<label for="fldSearch">Keywords</label>
<input id="fldSearch" name="keywords" type="search" />
<input name="btnSubmit" type="submit" value="Search" />
</div>
</form>
body {
font: 1.2em / 1.5 sans-serif;
}
.my-form {
border: 2px solid black;
padding: 5px;
}
Click here to show the solution
Here's an example solution for the task:
.my-form {
border: 2px solid black;
padding: 5px;
}
.my-form input[type="search"] {
padding: 10px;
font-size: inherit;
}
.my-form input[type="submit"] {
padding: 10px;
font-size: inherit;
background-color: rebeccapurple;
color: white;
border: 0;
border-radius: 5px;
}
Task 3
Our second form styling assessment is fairly free-form, and you have a lot of flexibility over what you end up doing here. Your CSS needs to fulfill the requirements described below.
To complete the task:
- Add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with, as described in Normalizing form behavior.
- On top of that, add in some nice, consistent styling for the inputs and button.
- Use some kind of layout technique to make the inputs and labels line up neatly.
* {
box-sizing: border-box;
}
body {
background-color: white;
color: #333333;
font:
1em / 1.4 Helvetica Neue,
Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0;
width: 500px;
}
/* Don't edit the code above here! */
/* Add your code here */
Click here to show the solution
Your finished CSS could look something like this:
/* ... */
/* Don't edit the code above here! */
button,
input,
select {
font-family: inherit;
font-size: 100%;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
li:last-of-type {
margin-top: 30px;
}
label {
flex: 0 40%;
text-align: right;
padding-right: 10px;
}
input,
select {
flex: auto;
height: 2em;
}
input,
select,
button {
display: block;
padding: 5px 10px;
border: 1px solid #cccccc;
border-radius: 3px;
}
select {
padding: 5px;
}
button {
margin: 0 auto;
padding: 5px 20px;
line-height: 1.5;
background: #eeeeee;
}
button:hover,
button:focus {
background: #dddddd;
}