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

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. If you want a <div> element to occupy 50% of its parent container’s width, which CSS property would you use?

A width: 50%;

B height: 50%;

C max-width: 50%;

D size: 50%;

Answer  

2. What does the CSS property float: right; do?

A Moves an element to the right and makes it float above other elements

B Moves an element to the left and makes it float

C Moves an element to the right without floating it

D Moves an element to the right and prevents other elements from touching it

Answer  

3. Which CSS property creates a border around an element with rounded corners?

A rounded-border

B border-style

C corner-radius

D border-radius

Answer  
 

4. What does the following CSS code do?

#box {
  margin: auto;
  width: 50%;
}

A Horizontally centers the element

B Vertically centers the element

C Applies a 50% width without changing position

D Centers the element both vertically and horizontally

Answer  

5. What does the following CSS rule do?

#box {
  position: absolute;
  top: 20px;
  left: 50px;
}

A Positions the element relative to its immediate parent

B Fixes the element to the top-left corner of the window

C Positions the element 20px from the top and 50px from the left of the page

D Creates a floating effect in the top left

Answer  

6. What does the following code do?

#button:hover {
  background-color: green;
  color: white;
  cursor: pointer;
  transform: scale(1.2);
}

A Changes text color on hover

B Changes the button size on hover

C Changes background and text color and enlarges on hover

D Changes the button color to green without hover effect

Answer  
 

7. Which CSS property adds a blur effect to an element’s background?

A background-blur

B filter: blur;

C backdrop-filter: blur;

D blur-effect: true;

Answer  

8. If you want an image to take up the full width of the screen while maintaining its aspect ratio, which CSS rule should you use?

A width: 100%; height: auto;

B width: auto; height: 100%;

C max-width: 100%;

D height: 100%; width: auto;

Answer  

9. What’s the main difference between position: relative; and position: absolute;?

A relative places the element at the bottom of its container; absolute places it relative to the window

B relative positions the element relative to its original location; absolute positions it relative to its first positioned parent

C They do the same thing, but absolute is faster

D relative places an element on top of others; absolute hides it behind

Answer  
 

10. What does the CSS property clamp() do?

A Sets a responsive size between a minimum and maximum value depending on screen size.

B Applies a blur effect based on size range.

C Defines a dynamic transform effect.

D Clips content to fit the parent’s size.

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