ETH25PU01_HTML-CSS FEB MOCK
✘ 1. A developer is designing a button that gradually fades out when the user hovers over it. They use the following CSS:
Points: button {
0/1 opacity: 1;
transition: opacity 0.5s ease-in-out;
}
button:hover {
opacity: 0;
}
What happens when the user moves the cursor away from the button after hovering?
The button becomes partially visible.
The button immediately becomes visible.
The button remains invisible.
The button gradually becomes visible again. ✓
✘ 2. How do you define a header cell in a table?
Points: <header>
0/1 <th> ✓
<h>
<thead>
✘ 3. A developer wants an image to enlarge smoothly when hovered over. They use the following CSS:
Points: img {
0/1 transform: scale(1);
transition: transform 0.4s ease-in-out;
}
img:hover {
transform: scale(1.2);
}
What does the transform: scale(1.2); do when the user hovers over the image?
Enlarges the image to 120% of its size. ✓
Changes the position of the image.
Shrinks the image to 80% of its size.
Rotates the image 120 degrees.
✘ 4. A news website has a section where article titles are centered within their container for a clean and uniform look.
Points: Which CSS property aligns the text to the center?
0/1
vertical-align
justify-content
align-items
text-align ✓
✘ 5. What is the effect of the following code on the blue box?
Points: .container {
0/1 position: relative;
width: 400px;
height: 300px;
background-color: lightgray;
}
.box {
position: absolute;
bottom: 20px;
right: 30px;
width: 100px;
height: 100px;
background-color: blue;
}
The blue box will be positioned 20px from the bottom and 30px from the right of the body.
The blue box will be placed at the bottom-right corner of the viewport.
The blue box will be placed at the bottom-right corner of the container, with a 20px margin from the bottom and 30px from the
right.
The blue box will remain in its default position. ✓
✘ 6. What does HTML stand for?
Points: Hyper Transfer Markup Language
0/1 Home Tool Markup Language
Hyper Text Markup Language ✓
Hyperlinks and Text Markup Language
✘ 7. A website's paragraph has a yellow background applied behind its text to make it more readable on a dark background.
Points: Which CSS property is used to apply a background color to the text itself?
0/1
color
text-background
text-highlight
background-color ✓
✘
Points:
8. Which of the following CSS properties is used to change the
0/1 background color?
bgcolor
color
bg-color
background-color ✓
✘ 9. Which language codes are valid for the lang attribute? (select all the three)
Points: za
0/1 hi ✓
fr ✓
en ✓
✘ 10. An element (a div) rotates 360 degrees when clicked. The developer uses the following CSS:
Points: div {
0/1 transition: transform 1s linear;
}
div:active {
transform: rotate(360deg);
}
What happens when the user clicks the div?
The div changes its size instead of rotating.
The div rotates smoothly over 1 second. ✓
The div immediately rotates 360 degrees.
The div rotates partially and stops midway.
✘ 11. What will the following code do?
Points: <img src="image.jpg" alt="Sample Image" width="200" height="100">
0/1
Displays image icon
Display an image with 200px width and 100px height ✓
Display a placeholder text if the image cannot load
Throw an error because the src is invalid
✘ 12. Can an HTML document contain multiple <body> tags?
Points: - Select - ✘
0/1
Correct answer: No
✘ 13. Which attribute specifies the path of an image in HTML?
Points: path
0/1 src ✓
href
alt
✘ 14. Which tag is used to create a table in HTML
Points: <table> ✓
0/1 <td>
<tr>
<tab>
✘ 15. Can we include subtitles in a video using HTML
Points: No, subtitles are not supported
0/1 No, use a JavaScript library for that
Yes, with the tag ✓
Yes, with the subtitles attribute
✘ 16. What will happen to the box with the following CSS rules?
Points: div {
0/1 position: absolute;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
}
The box will move relative to its original position.
The box will stay at the top-left corner of the page.
The box will be positioned 50px from the top and 100px from the left of the nearest positioned ancestor.
The box will be positioned 50px from the top and 100px from the left of the viewport. ✓
✘
Points:
17. What is the default positioning of an HTML element in CSS?
0/1 relative
absolute
fixed
static ✓
✘ 18. Which property is used to add space between the content and the border of an element?
Points: margin
0/1 box-shadow
border-spacing
padding ✓
✘ 19. What does the colspan attribute do in a table?
Points: Changes column width
0/1 Spans a cell across multiple columns ✓
Spans a cell across multiple rows
Aligns text in the column
✘
Points:
20. Which property is used to change the text color of an element?
0/1 text-color
color ✓
font-color
text-style
✘ 21. Which tag is used to embed a video in HTML?
Points: <iframe>
0/1 <video> ✓
<embed>
<object>
✘ 22. The <title> tag can appear multiple times in a document.
Points: - Select - ✘
0/1
Correct answer: False
✘ 23. The line-height property controls the vertical spacing between lines of text.
Points:
0/1 - Select - ✘
Correct answer: True
✘ 24. Which tags are used to create lists in HTML?
Points: <dl> ✓
0/1 <ol> ✓
<li> ✓
<ul> ✓
<p>
✘ 25. A webpage uses the <script> tag to execute a JavaScript function that dynamically displays today's date. However, if the
browser does not support JavaScript, the <noscript> tag provides a fallback message saying, "Your browser does not support
Points: JavaScript. Please update your browser."
0/1
The <noscript> tag is ignored by all browsers that have JavaScript enabled, even if the JavaScript function in the <script> tag
fails to execute.
- Select - ✘
Correct answer: True
✘ 26. What will the following code do to the green box?
Points: div {
0/1 position: fixed;
top: 0;
left: 0;
width: 150px;
height: 150px;
background-color: green;
}
The green box will disappear if the page is scrolled.
The green box will be positioned relative to the parent element.
The green box will stay at the top-left corner of the viewport, even when the page is scrolled. ✓
The green box will scroll with the page and stay at the top-left corner of the document.
✘ 27. The text-align property can align text to the left, right, center, or justify the text.
Points: - Select - ✘
0/1
Correct answer: True
✘
Points:
28. Which of the following is the correct syntax for a CSS comment?
0/1 // This is a comment
# This is a comment
<!-- This is a comment -->
/* This is a comment */ ✓
✘ 29. What does the alt attribute in an <img> tag specify?
Points: The source of the image
0/1 The title of the image
The image resolution
Alternative text to display if the image fails to load ✓
✘ 30. Which attributes are valid for the <form> tag? (select all three answers)
Points: action ✓
0/1 method ✓
post
enctype ✓
✘ 31. Which CSS property specifies the space outside the border of an element?
Points: margin ✓
0/1 border-width
spacing
padding
✘ 32. How do you set the width and height of an image in HTML
Points: Using the size attribute in
0/1 It is not possible
Using CSS only
Using the width and height attributes in ✓
✘ 33. The <ul> tag creates an unordered list.
Points: - Select - ✘
0/1
Correct answer: True
✘ 34. A developer includes a JavaScript file in their webpage using the <script> tag. They also add a <noscript> section that
displays a message: "JavaScript is required to view this content" for users who have disabled JavaScript in their browsers.
Points:
0/1 The <noscript> content will only be displayed if the user's browser does not support JavaScript or JavaScript is disabled.
- Select - ✘
Correct answer: True
✘ 35. What will be the effect of the overflow property in this code?
Points: div {
0/1 width: 100px;
height: 100px;
overflow: hidden;
}
- Select - ✘
Correct answer: Content larger than the box will be hidden.
✘
Points:
36. What does CSS stand for?
0/1 Cascading Style Scripts
Creative Style Sheets
Colorful Style Sheets
Cascading Style Sheets ✓
✘ 37. Which is the correct syntax for an HTML comment
Points: /** Comment **/
0/1 /* Comment */
<!-- Comment --> ✓
# Comment
✘ 38. Which section of an HTML document contains metadata?
Points: <footer>
0/1 <meta>
<body>
<head> ✓
✘ 39. Which attribute of the <video> tag allows autoplay
Points: controls
0/1 play
autoplay ✓
src
✘ 40. Which property can add a shadow effect to the element's box?
Points: shadow-color
0/1 text-shadow
box-shadow ✓
border-shadow
✘ 41. What is the default file extension for HTML files? (select two right asnwers)
Points: hlmt
0/1 hmtl
html ✓
htm ✓
✘ 42. What is the default value of the box-sizing property?
Points: border-box
0/1 padding-box
inherit
content-box ✓
✘ 43. A developer wants to highlight a quote on the webpage by giving it a border around the text only, without affecting the padding or
margin around the text block.
Points:
0/1 Which CSS property is suitable for creating a border around the text content?
text-border
outline
border
text-stroke ✓
✘ 44. What effect does the following code have?
Points: div {
0/1 box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
- Select - ✘
Correct answer: The total width becomes 200px, including padding and border.
✘ 45. What is the first tag in an HTML document?
Points: <body>
0/1 <html>
<!DOCTYPE> ✓
<head>
✘ 46. Identify the issue in the following layout code:
Points: <header>
0/1 <h1>Header</h1>
<header>
Invalid placement of <header>
Missing a closing </header> tag ✓
No issue
Header tag is not valid in HTML
✘ 47. A webpage has a heading styled with text-decoration: underline; to emphasize it. However, the designer wants to remove the
underline when the user hovers over the heading.
Points:
0/1 Which of the following CSS rules removes the underline on hover?
text-decoration: none; ✓
text-decoration: inherit;
text-decoration: hover;
text-decoration: unset;
✘ 48. The text-transform property can only capitalize the first letter of each word.
Points: - Select - ✘
0/1
Correct answer: False
✘ 49. An e-commerce site highlights products by increasing the brightness of images on hover.
Points: Which CSS rule adjusts the brightness smoothly when hovered?
0/1
transition: filter 0.5s ease;
transform: brightness(150%); transition: brightness 0.5s ease;
filter: brightness(150%); transition: filter 0.5s ease; ✓
filter: brightness(150%);
✘ 50. What will be the total width of the following element?
Points: div {
0/1 width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
- Select - ✘
Correct answer: 270px
