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

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 is the CSS trick that prevents text from overflowing a container?

A overflow: hidden;

B text-overflow: ellipsis;

C white-space: nowrap;

D All of the above

overflow: hidden; hides any content that overflows the container. text-overflow: ellipsis; adds ellipsis (…) if the text overflows. white-space: nowrap; prevents the text from breaking into multiple lines, which can also prevent overflow.

2. What does the CSS property `writing-mode: vertical-rl;` do?

A Allows text to be written from right to left, bottom to top

B Changes text from horizontal alignment to vertical, with a right-to-left flow

C Creates text that moves vertically from top to bottom

D Writes text vertically from bottom to top

writing-mode: vertical-rl; changes the text orientation to make it vertical and displays it from right to left (as seen in some types of Eastern writing). See a complete example.

3. What is the effect of the CSS property `transition: all 0.3s ease-in-out;`?

A Applies a transition to all elements on the page

B Creates a transition with a duration of 0.3 seconds, with a smooth starting transition (ease-in) and a smooth ending transition (ease-out)

C Changes the color of all elements on hover

D Applies an infinite animation

transition: all 0.3s ease-in-out; is a common syntax for creating smooth transitions. It affects all properties (all), lasts for 0.3 seconds, and has a smoother start and end (ease-in-out).

4. What effect do you get by applying `filter: blur(5px);` to an image?

A The image becomes sharper

B The image becomes blurred with a blur of 5 pixels

C The image is divided into sections

D The image changes color

The property filter: blur(5px); applies a blur effect to the element, with the value of 5px determining the intensity of the blur.

5. If you want the list items to be displayed horizontally (side by side), which CSS property would you use?

A list-style-type: none;

B display: inline-block;

C display: block;

D float: left;

display: inline-block; allows list items to be displayed in a single line while maintaining their block properties. This enables horizontal display.

6. What does the term “CSS Grid” mean?

A A type of table structure in CSS

B A layout method that arranges elements in rows and columns

C A property that defines the borders of an element

D A method of background gradient

CSS Grid is a powerful layout system that allows elements to be organized in a grid of rows and columns. It makes creating complex layouts easier.

7. What does the CSS property `text-transform: capitalize;` do?

A Converts all text to uppercase

B Converts all text to lowercase

C Capitalizes the first letter of each word

D Applies a capital letter to each character

text-transform: capitalize; capitalizes the first letter of each word in a text, which is commonly used for styling titles.

8. What does the property `box-sizing: border-box;` do?

A Includes borders and margins in the element’s dimensions

B Changes the behavior of flexible boxes

C Ensures that borders and padding are included in the element’s dimensions, rather than being added to them

D Changes the shape of boxes based on the content

box-sizing: border-box; ensures that an element’s width and height include its borders and padding, making layout management easier without having to account for extra space outside the element.

9. What does the CSS property `flex-wrap: wrap;` do in CSS Flexbox?

A Forces all elements to stay on a single line

B Allows elements to move in any order

C Allows elements to move to the next line when there is not enough space

D Reorganizes elements into columns

flex-wrap: wrap; allows flexible items to “wrap” onto multiple lines when there isn’t enough space to fit all items on a single line.

10. What is the correct syntax to use a custom font in CSS?

A font-family: "Arial", sans-serif;

B font-face: "Arial";

C @font-face { font-family: "CustomFont"; src: url("custom-font.woff2"); }

D font-family: url("custom-font.woff2");

@font-face is used to define a custom font. You specify the font name with font-family and the file source with src.

1. What is the CSS trick that prevents text from overflowing a container?

2. What does the CSS property writing-mode: vertical-rl; do?

3. What is the effect of the CSS property transition: all 0.3s ease-in-out;?

4. What effect do you get by applying filter: blur(5px); to an image?

5. If you want the list items to be displayed horizontally (side by side), which CSS property would you use?

6. What does the term “CSS Grid” mean?

7. What does the CSS property text-transform: capitalize; do?

8. What does the property box-sizing: border-box; do?

9. What does the CSS property flex-wrap: wrap; do in CSS Flexbox?

10. What is the correct syntax to use a custom font in CSS?

You May Also Like

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

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

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

Leave a Reply Cancel reply

2. What does the CSS property `writing-mode: vertical-rl;` do?

3. What is the effect of the CSS property `transition: all 0.3s ease-in-out;`?

4. What effect do you get by applying `filter: blur(5px);` to an image?

7. What does the CSS property `text-transform: capitalize;` do?

8. What does the property `box-sizing: border-box;` do?

9. What does the CSS property `flex-wrap: wrap;` do in CSS Flexbox?