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

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. What effect does the CSS property `backdrop-filter: blur(5px);` produce?

A Blurs the background behind an element

B Adds a blurred drop shadow

C Creates a blurred gradient background

D Blurs the text of an element

backdrop-filter: blur(5px); applies a blur effect to the background behind the element while keeping the element itself sharp.

2. Which CSS property lets you ensure that text inside an element wraps to fit without overflowing?

A word-wrap: break-word;

B white-space: nowrap;

C text-overflow: ellipsis;

D overflow-wrap: break-word;

overflow-wrap: break-word; forces text to break within an element, preventing it from overflowing.

3. Which CSS property creates a text highlight effect on hover?

A background-color: yellow; color: black;

B color: yellow; background-color: black;

C text-decoration: underline; background-color: yellow;

D text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); color: #ff6347;

text-decoration: underline and background-color: yellow create a classic highlight effect with underline and yellow background. See full example.

4. What effect does `@keyframes swing` create, which moves an element from 0 to 20 degrees and back to 0?

A A swinging motion

B A vertical translation

C A circular motion

D A zoom effect

The animation defined by @keyframes swing creates a back-and-forth swinging effect, similar to a pendulum. See full example.

5. Which CSS property can be used to create a 3D text effect?

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

B transform: perspective(500px) rotateX(10deg);

C font-weight: bold; text-transform: uppercase;

D box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);

The transform: perspective combined with rotateX() creates a 3D perspective effect that gives depth to the text.

6. What does the CSS property `border-image` do?

A Applies an image as a border around an element.

B Sets a border of a specific color.

C Adds a gradient border around an element.

D Creates an animated border that changes color.

border-image allows an image to be used as the border of an element, defining how the image is sliced and applied around the edges.

7. Which CSS layout model allows you to arrange elements in a two-dimensional grid?

A Flexbox

B Grid

C Block

D Inline

CSS Grid Layout is a two-dimensional layout system for arranging elements in rows and columns. Flexbox is one-dimensional, while the others are display behaviors, not layout models.

8. Where is it best to place a JavaScript file in an HTML document so it doesn’t block page rendering?

A Inside the <head> section

B Before the </body> tag

C At the start of the <body> tag

D Inside the <footer> section

It is recommended to place JavaScript scripts before the </body> tag so the HTML loads first, improving performance. Putting them in the <head> can delay rendering.

9. Which CSS property sets the thickness of an element’s border?

A border-width

B border-thickness

C border-style

D border-size

The border-width property sets the border thickness. Other options like border-thickness and border-size are not valid CSS properties.

10. Which CSS selector targets all <p> elements that follow a <div>, regardless of whether they come immediately after?

A div + p

B div ~ p

C div > p

D div p

The div ~ p selector targets all <p> siblings that follow a <div>, even if there are other elements in between. In contrast, div + p targets only the first <p> directly after, and div > p selects only direct children.

1. What effect does the CSS property backdrop-filter: blur(5px); produce?

2. Which CSS property lets you ensure that text inside an element wraps to fit without overflowing?

3. Which CSS property creates a text highlight effect on hover?

4. What effect does @keyframes swing create, which moves an element from 0 to 20 degrees and back to 0?

5. Which CSS property can be used to create a 3D text effect?

6. What does the CSS property border-image do?

7. Which CSS layout model allows you to arrange elements in a two-dimensional grid?

8. Where is it best to place a JavaScript file in an HTML document so it doesn’t block page rendering?

9. Which CSS property sets the thickness of an element’s border?

10. Which CSS selector targets all <p> elements that follow a <div>, regardless of whether they come immediately after?

You May Also Like

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

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

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

Leave a Reply Cancel reply

1. What effect does the CSS property `backdrop-filter: blur(5px);` produce?

4. What effect does `@keyframes swing` create, which moves an element from 0 to 20 degrees and back to 0?

6. What does the CSS property `border-image` do?