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.
Images and forms 1
In this task, you have an image that is overflowing the box. We want you to scale down the image so that it fits inside the box without any extra white space; we don't mind if some part of the image is cropped. Update the CSS to achieve this.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<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 */
}
The updated styling should look like this:
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;
}
Images and forms 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.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<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;
}
The updated styling should look like this:
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;
}
Images and forms 3
The solution for this assessment is fairly free-form, and you have a lot of flexibility over what you can do here. So we're not providing an example rendering.
Your CSS needs to include the following:
- A lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with, as described in Normalizing form behavior.
- Some nice, consistent styling for the inputs and button.
- A layout technique to make the inputs and labels line up neatly.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
* {
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 */
We've not provided finished content for this task, as many valid solutions are possible.
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;
}