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

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. Which HTML tag is ideal for defining a section of a dynamic article that may contain comments or reactive content?

A <aside>

B <div>

C <section>

D <article>

Answer  

2. How do you apply an image as a text mask, making the inside of the text transparent and displaying the image behind it?

A background-image: url('image.jpg'); -webkit-mask-image: url('image.jpg');

B mask-image: url('image.jpg'); background: transparent;

C mask-image: url('image.jpg');

D text-mask: url('image.jpg');

Answer  

3. How do you add dynamic validation to a form field in HTML to ensure the user enters a valid email?

A <input type="email" required>

B <input type="text" validate="email">

C <input type="email" placeholder="Enter your email">

D <input type="text" pattern="email">

Answer  
 

4. Which HTML tag is used to define a level 3 heading in a web page?

A <h3>

B <h2>

C <title>

D <header>

Answer  

5. How do you create an animated border that changes color every 2 seconds?

A

@keyframes borderColor {
  0% {
    border-color: red;
  }
  100% {
    border-color: blue;
  }
}

B

@keyframes border-animation {
  from {
    border-color: red;
  }
  to {
    border-color: blue;
  }
}

C animation: borderColor 2s infinite;

D A and C

Answer  

6. Which CSS property allows animating the movement of an element along the X-axis (horizontal)?

A @keyframes moveX { from { left: 0px; } to { left: 100px; } }

B transform: translateX(100px);

C animation: moveX 1s infinite;

D All of the above

Answer  
 

7. Which HTML tag creates a button that opens a PDF file in the browser when clicked?

A <button onclick="window.open('document.pdf');">Open PDF</button>

B <a href="document.pdf" download>Open PDF</a>

C <button href="document.pdf">Open PDF</button>

D <a href="document.pdf" target="_blank">Open PDF</a>

Answer  

8. How do you embed a video that starts playing automatically when it’s loaded on the page?

A <video autoplay><source src="video.mp4" type="video/mp4"></video>

B <video src="video.mp4" autoplay></video>

C <video controls autoplay="true"><source src="v.mp4" type="mp4"></video>

D <video src="video.mp4" autoplay="true"></video>

Answer  

9. How do you validate a form field in HTML to only accept email addresses containing “@gmail.com”?

A <input type="email" pattern="^[a-zA-Z0-9._%+-]+@gmail\.com$" required>

B <input type="text" pattern="^[a-zA-Z0-9._%+-]+@gmail\.com$" required>

C <input type="email" required pattern=".*@gmail\.com$">

D <input type="text" pattern=".*@gmail\.com$" required>

Answer  
 

10. Which CSS property allows you to apply both rotation and translation to an element simultaneously?

A transform: translateX(100px) rotate(45deg);

B transform: scale(1.2) rotate(45deg);

C transform: translate(100px, 0) rotate(45deg);

D transform: rotate(45deg) translateX(100px);

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