WorksheetsHTML and CSS Basics Quiz
Total questions: 20
Worksheet time: 15mins
What is the purpose of the
tag in an HTML document?To display content in the browser window
To link CSS files and provide meta information
To define the main content of the page
To create comments in the HTML
How do you set the background color of a webpage to light blue using CSS?
body { color: lightblue; }
body { background-color: lightblue; }
body { border-color: lightblue; }
body { font-color: lightblue; }
What is the purpose of a
To create a new page
To represent a block of content
To create a click element
What is the purpose of setting the z-index to -1 in a CSS overlay?
To make the overlay cover the entire parent element
To place the overlay behind the actual content
To stretch the pseudo-element to all sides
To change the color of the overlay
What is the purpose of using the
tag in HTML as described in the document? <section>
To style the text
To embed a video
To create a generic container for content
To add a background image
What is the function of the class "andy" in the HTML structure provided? <div class="andy">
It embeds a YouTube video
It is the main wrapper for styling
It sets the video to responsive size
It limits the iframe width
What is the purpose of using "display: flex" in the .andy class?
To create a parallax effect
To center the iframe using Flexbox
To add space inside the .andy box
To set a scenic image as background
What is the effect of setting "z-index: -1" in the .andy:before class?
It makes the overlay opaque
It positions the overlay above the content
It sets the overlay behind the actual content
It changes the overlay color
Which CSS property is used to arrange child elements in a row?
justify-content: space-between;
display: flex;
align-items: center;
z-index: 999999;
What is the purpose of using the aspect-ratio property in CSS?
To change the color of an element
To keep image dimensions consistent
To add content using CSS
To control the stacking order
What does the flexbox feature help with in CSS?
Aligning items in a row or column
Adding a red background to links
Making text white
Setting the logo size
In CSS, what does the z-index property control?
The color of text
The stacking order of elements
The size of the logo
The aspect ratio of images
Which CSS property is used to hide an element by default?
position
display
color
min-width
What does the `DOMContentLoaded` event signify in JavaScript?
The entire webpage, including images and styles, is fully loaded.
The HTML page's structure is loaded and ready.
The JavaScript code has finished executing.
The CSS styles have been fully applied.
What happens if the `menuIcon` or `menu` is not found in the HTML when using the JS: <script>
document.addEventListener('DOMContentLoaded', () => {
const images = document.querySelectorAll('.fade-p');
const revealOnScroll = () => {
const triggerBottom = window.innerHeight * 0.9; // 90% from top of screen
images.forEach(img => {
const imgTop = img.getBoundingClientRect().top;
if (imgTop < triggerBottom) {
img.classList.add('visible');
}
});
};
// Run on scroll
window.addEventListener('scroll', revealOnScroll);
// Run once on page load
revealOnScroll();
});
</script>
The script stops executing.
An error message is printed in the browser console.
The page reloads automatically.
A new menu is created.
What does the `placeholder` attribute do in an HTML form?
It submits the form data
It provides a hint about what to enter in a field
It changes the form's background color
It validates the form input
What is the function of the `class="submit"` in the input element:
<input type="submit" value="Submit" class="submit">
It changes the text color
It applies specific styles to the submit button
It validates the form
It adds a new section to the form
What is the purpose of setting 'max-width: 800px' in a form?
To make the form fill its parent
To prevent the form from becoming too wide
To center the form vertically
To add space between form fields
What is the purpose of setting the background color to navy in the CSS code?
To make the text invisible
To make the elected element to the color of navy
To add space above the text
To change the font style
Where is the paragraph tag?
