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

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 following CSS code do?

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

A Creates a grid with three equal columns

B Creates a grid with three columns of variable sizes

C Creates a grid with a single column

D Creates a grid with two columns

Answer  

2. What is the purpose of the rel="noopener noreferrer" attribute in a <a> link?

A It prevents the link from opening in a new window

B It improves security by preventing the linked page from accessing the origin page

C It forces the link to be unclickable

D It adds a custom style to the link

Answer  

3. How can you make text get cut off and replaced with ellipsis when there is not enough space?

A text-overflow: ellipsis;

B text-clamp: ellipsis;

C overflow-text: ellipsis;

D clipping-text: ellipsis;

Answer  
 

4. What is the difference between ‘rem’ and ’em’ in CSS?

A rem is relative to the window size, em is relative to the parent text size

B rem is relative to the parent text size, em is relative to the window size

C rem is a fixed unit, em is relative to the default font size

D No difference, they are identical

Answer  

5. Which CSS method is used to center an element both horizontally and vertically within a container?

A center: both;

B text-align: center; vertical-align: middle;

C display: flex; justify-content: center; align-items: center;

D position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Answer  

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

A Changes the size of elements by including border and padding in the total width and height

B Changes the border color of elements

C Applies a colored background to elements

D Resizes the content box without affecting the text

Answer  
 

7. What does the following CSS rule do?

#header {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

A Creates a grid of three rows with variable heights, where the first and last are auto-sized, and the second takes up the remaining space

B Creates a grid with a single row

C Creates a grid with two rows, the second being larger

D Creates a grid container with no rows

Answer  

8. What is the effect of the white-space: nowrap; property in CSS?

A Forces text to display on multiple lines

B Prevents text lines from breaking, forcing all text to display on a single line

C Aligns text to the left

D Prevents elements from resizing

Answer  

9. Which CSS property is used to create a circular (radial) gradient effect on an element?

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

B background: radial-gradient(circle, red, yellow);

C background-image: gradient-radial(red, yellow);

D background-color: radial-gradient;

Answer  
 

10. What does the clip-path: circle(50%); property do?

A Masks part of the element with a circular shape

B Cuts the element into two equal parts

C Creates a circular border around the element

D Applies a circular shadow to the element

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