HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 43

Multiple choice questions and answers (MCQs) on HTML/CSS to prepare for exams, tests, and certifications. These questions are taken from a real written exam and some parts are taken from an interview. So you will find questions on basic techniques such as tags, web standards, CSS selector, objects, and more. This quiz will easily prepare anyone to pass their online test.
 
 

1. What does the CSS property text-decoration: line-through; do?

A Applies an underline to the text

B Applies a horizontal line through the text

C Changes the text color

D Adjusts the spacing between text characters

<p>This text <span style="text-decoration: line-through;">is crossed out</span> but this one is not.</p>

2. What does the object-fit: cover; property do when applied to an image?

A Resizes the image to perfectly cover the container without distortion, cropping as needed

B Resizes the image to be smaller than the container, without distortion

C Displays the image with rounded borders

D Applies a filter to the image

3. How do you create a 3-column grid with CSS Grid and leave 20px spacing between items?

A grid-template-columns: repeat(3, 1fr); gap: 20px;

B grid-template-columns: 3fr; gap: 20px;

C grid-template-rows: repeat(3, 1fr); gap: 20px;

D grid-template-columns: 1fr 1fr 1fr; spacing: 20px;

4. What does the will-change: transform; property do in CSS?

A Prepares the browser to optimize performance for transformations on the element

B Applies a transformation to the element only on hover

C Automatically changes the element’s color when modified

D Changes the element’s shape on hover

5. What does the property filter: grayscale(100%); do?

A Applies a blur to the element

B Applies a black-and-white filter to the element

C Changes the background color of the element to black

D Makes the element invisible

6. What does @media (max-width: 600px) allow you to do in CSS?

A Change the page width based on screen size

B Apply styles only when viewed on a mobile device

C Create an animation based on screen width

D Apply styles only when the screen is 600px wide or less

7. Which CSS property ensures that grid items don’t overlap?

A grid-auto-flow: row;

B grid-template-areas: auto;

C grid-gap: 20px;

D grid-template-columns: auto;

8. What effect does clip-path: polygon(50% 0%, 0% 100%, 100% 100%); have on an element?

A Creates a triangular shape

B Creates a diamond shape

C Creates an equilateral triangle

D Creates an inverted triangle

9. If you want to create a radial gradient background from red at the center to blue at the edges, which CSS rule would you use?

A background: radial-gradient(circle, red, blue);

B background: linear-gradient(circle, red, blue);

C background: radial-gradient(red, blue);

D background: circle-gradient(red, blue);

10. Which CSS property creates a blurry text effect?

A text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

B filter: blur(5px);

C text-blur: 5px;

D font-blur: 5px;

MCQPractice competitive and technical Multiple Choice Questions and Answers (MCQs) with simple and logical explanations to prepare for tests and interviews.Read More