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

April 22, 2025 John Howard

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. How do you create a container with a semi-transparent background while keeping its content readable?

A background-color: rgba(255, 0, 0, 0.5);

B background-opacity: 0.5;

C background-color: transparent;

D background-image: transparent;

The rgba notation allows you to specify a color with an alpha transparency level. 0.5 means 50% transparency, making the background semi-transparent while keeping the content above visible.

2. Which CSS property creates a zoom effect on an image when a user hovers over it?

A transform: scale(1.2);

B zoom: 1.2;

C transform: zoom(1.2);

D scale: 1.2;

The transform: scale() property resizes an element. Using scale(1.2) enlarges the element by 20%. See a complete example.

3. How can you give a webpage a dynamic background that moves slowly across the page?

A background-image: linear-gradient;

B background-attachment: fixed;

C background-position: fixed;

D background-size: cover;

The background-attachment: fixed; property keeps the background fixed while the content scrolls, creating a parallax effect. Example:

body {
  background-image: url('background.jpg');
  background-attachment: fixed;
}

4. What is the role of the CSS Flexbox model?

A Create a layout grid

B Create a flexible and dynamic layout

C Resize elements

D Arrange items in a table

Flexbox provides a flexible layout system that allows child elements to automatically adapt to available space with smooth control over sizing and alignment.

5. If you want to create a text animation that reveals letters one by one, which type of animation should you use?

A @keyframes

B text-appear

C @animate-text

D @sequence

CSS animations are defined using @keyframes, allowing you to set intermediate steps of the animation. See a complete example.

6. Which CSS property helps render an image sharper on high-resolution screens like Retina displays?

A image-smoothing

B image-resolution

C image-rendering

D background-image-resolution

The image-rendering property can be used to control image rendering quality. For example, image-rendering: crisp-edges; improves sharpness on high-DPI screens.

7. You want to show a table with borders between cells but no outer border around the entire table. Which CSS property should you use?

A border-collapse: separate;

B border-collapse: collapse;

C border-style: none;

D border: 1px solid transparent;

border-collapse: collapse; merges borders between adjacent table cells, keeping internal borders without adding one around the entire table. See a complete example.

8. Which CSS property turns an HTML element into a flexible container that wraps its items onto multiple lines if needed?

A flex-wrap: wrap;

B flex-direction: column;

C justify-content: space-evenly;

D align-items: center;

flex-wrap: wrap; allows a flex container to wrap items onto multiple lines when needed. See a complete example.

9. You want your page to have a sticky header that remains visible while scrolling. Which CSS property do you use?

A position: fixed;

B position: sticky; top: 0;

C position: absolute;

D position: relative;

position: sticky; allows an element to “stick” to the top of the screen when scrolling. Example:

header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

10. You want to apply a blur effect to an image on hover without changing its size. Which CSS property do you use?

A filter: blur(5px);

B filter: opacity(0.5);

C transform: scale(1.1);

D background-blur: 5px;

The filter: blur() property applies a blur effect without affecting the element’s size. Used on hover, it creates a nice visual effect. Example:

img:hover {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

See a complete example.

1. How do you create a container with a semi-transparent background while keeping its content readable?

2. Which CSS property creates a zoom effect on an image when a user hovers over it?

3. How can you give a webpage a dynamic background that moves slowly across the page?

4. What is the role of the CSS Flexbox model?

5. If you want to create a text animation that reveals letters one by one, which type of animation should you use?

6. Which CSS property helps render an image sharper on high-resolution screens like Retina displays?

7. You want to show a table with borders between cells but no outer border around the entire table. Which CSS property should you use?

8. Which CSS property turns an HTML element into a flexible container that wraps its items onto multiple lines if needed?

9. You want your page to have a sticky header that remains visible while scrolling. Which CSS property do you use?

10. You want to apply a blur effect to an image on hover without changing its size. Which CSS property do you use?

You May Also Like

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

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

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

Leave a Reply Cancel reply