Worksheets9 - REVIEW | HTML5 AND CSS
Total questions: 26
Worksheet time: 12mins
1. Correct the Image Tag Syntax
Question:
What is wrong with this image tag?
<img src="cat.jpg" alt="Cute cat" width="200px" height="200">
a) The height attribute has no unit of measurement.
b) The alt text should be wrapped in quotation marks.
c) The src path should include https://.
d) There's no issue with this image tag.
Question:
What is the issue with the following CSS for the button?
button { border: 1px solid #000; box-shadow: 10px 10px; }
a) Missing values for the box-shadow (horizontal, vertical, blur, and color).
b) The box-shadow should use border as a value.
c) The border property should be placed after box-shadow.
d) The box-shadow syntax is correct.
3. Fix the Anchor Tag
Question:
How should you fix this anchor tag?
<a href=https://www.example.com Visit Example</a>
a) Add target="_blank" to open the link in a new tab.
b) Add quotes around the href URL.
c) Add the href attribute after the text.
b) Add quotes around the href URL.
4. Center Text Vertically and Horizontally
Question:
How can you center text both vertically and horizontally in a div using CSS?
.center { text-align: center; vertical-align: middle; }
a) Use display: flex and justify-content: center.
b) Use position: absolute and top: 50%.
c) Use text-align: center and line-height: 100%.
d) The current code is already correct.
Question:
What is missing in this HTML list structure?
<ol> <li>Apples</li> <li>Bananas</li> </ol>
a) There should be no <li> tags for each item.
b) Add a third item to the list (e.g., "Oranges").
d) There’s nothing missing in this list.
d) The current code is already correct.
What is the issue with the following CSS for the button?
button { border: 1px solid #000; box-shadow: 10px 10px; }
a) Missing values for the box-shadow (horizontal, vertical, blur, and color).
b) The box-shadow should use border as a value.
c) The border property should be placed after box-shadow.
d) The box-shadow syntax is correct.
What is the error in this code that links an external stylesheet?
<head> <style src="styles.css"> </head>
a) The <style> tag should not be used for linking external CSS.
b) src is the wrong attribute; it should be href.
c) The style tag must be inside the body section, not the head.
d) There's no issue with this code.
Question:
How can you correctly declare a font family in CSS?
h1 { font: Arial, Helvetica, sans-serif; }
a) Use font-family instead of font.
b) The font-family should be enclosed in quotes.
c) The font values should be ordered in reverse.
d) There’s nothing wrong with this declaration.
Question:
What needs to be fixed in this input field?
<input type="text" value= "John">
a) The value attribute should not have spaces.
b) The value should be inside double quotes.
c) The type should be password instead of text.
d) There's nothing wrong with this code.
Question:
What is missing in this padding rule?
div { padding: 10px 20px }
a) There should be no padding values.
b) The padding rule is missing a semicolon.
c) Add padding on all sides, not just two.
d) There's nothing wrong with this code.
Fill in the blank to set the background to light blue for the body element:
body { background- (a) : lightblue; }
Fill in the blank to apply padding of 20px to all sides of the div element:
div { (a) : 20px; }
p { font- (a) : 16px; }
.box { border: (a) 2px solid black; }
Fill in the blank to change the text color to red when hovering over a link:
a:hover { color: (a) ; }
Fill in the blank to align the text inside the h1 element to the center:
h1 { text-align: (a) ; }
Fill in the blank to set both the width and height of the .container class to 100%:
.container { width: ______; height: ______; }
(a)
Fill in the blank to add a 10px margin to the top of the p element:
p { margin- (a) : 10px; }
Fill in the blank to set the font of h2 to Arial, and use sans-serif as the fallback:
h2 { font-family: (a) , sans-serif; }
Fill in the blank to add a 1px solid red border to the input element:
input { border: (a) 1px solid red; }
Label the parts of this CSS rule:
div {
color: blue;
font-size: 16px;
margin: 10px;
}
WHAT DO WE CALL TO THE PART OF color, font-size, margin?
(a)
Label the parts of this CSS rule:
div {
color: blue;
font-size: 16px;
margin: 10px;
}
WHAT DO WE CALL TO THE PART OF blue, 16px, 10px?
(a)
Label the parts of this CSS rule:
div {
color: blue;
font-size: 16px;
margin: 10px;
}
WHAT DO WE CALL TO THE PART OF div?
(a)
You are designing a personal portfolio website. You want to make sure the website looks good on both desktop and mobile devices. Which CSS method would you use to achieve this?
Use media queries to adapt the layout for different screen sizes.
CSS Gridb) Use fixed widths for all elements so they stay the same across all screen sizes.
Float-based layoutc) Use inline styles to override the default styles for mobile.
d) Use the float property to position elements for all screen sizes.
You're working on an e-commerce site, and you need to create a section to showcase product images. Which CSS property would you use to make the images responsive, so they adjust to the container's size while maintaining their aspect ratio?
object-fit: contain;
width: 100%; height: auto;
display: flex; align-items: center;
You're creating a navigation bar that needs to be fixed at the top of the page while users scroll down. Which CSS property would you use to achieve this effect?
position: fixed; top: 0;
position: relative; top: 0;
position: absolute; top: 50px;
display: block; margin: 0 auto;
