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

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. Which type of <input> element allows creating a field to enter a color?

A <input type="text">

B <input type="color">

C <input type="date">

D <input type="range">

The ‘color’ type displays a color picker in a form, allowing the user to choose a color using a selection tool. Example:

2. Which HTML attribute is used to add a descriptive label to a form field?

A label

B for

C description

D input-label

The ‘for’ attribute in the <label> tag is used to associate a label with a specific form field, improving the accessibility of the site. It must match the id attribute of the form field. Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
</form>

3. Which CSS property controls the duration of a transition?

A transition-duration

B transition-time

C transition-speed

D transition-period

transition-duration defines the duration of a CSS transition. For example, transition-duration: 2s; creates a transition that lasts 2 seconds.

4. Which CSS property is used to define the spacing between the rows of a CSS grid?

A grid-gap

B grid-row-gap

C gap

D grid-spacing

grid-row-gap is a property specific to CSS Grid that defines the spacing between the rows of a grid. There is also grid-column-gap for columns, or gap to define both at once.

5. Which HTML tag allows you to include a responsive image that adapts to screen size?

A <img src="image.jpg">

B <picture>

C <image srcset="image.jpg">

D <responsive-img src="image.jpg">

The <picture> tag allows you to add responsive images by specifying multiple image sources based on screen size, resolution, or media type (for example, srcset).

6. Which CSS property allows you to add transparency to a color?

A opacity

B color-opacity

C rgba()

D transparent

The rgba() function defines a color with an alpha (transparency) component. For example, rgba(255, 0, 0, 0.5) creates a red color with 50% transparency.

7. Which HTML tag makes a video responsive (adapts to screen size)?

A <video width="100%">

B <video responsive>

C <iframe>

D <media>

By setting the width of a <video> element to 100%, the video becomes responsive and adapts to the size of its container, providing an optimal viewing experience across different devices.

8. Which CSS pseudo-class targets a link after it has been visited by the user?

A :visited

B :active

C :focus

D :hover

The :visited pseudo-selector targets a link after it has been visited by the user, typically to change its appearance, such as its color.

9. How do you make a background image responsive with CSS?

A background-size: cover;

B background-size: 100% 100%;

C background-repeat: no-repeat;

D background-image: url('image.jpg');

The background-size: cover; property makes the background image fit its container while maintaining its aspect ratio, making it responsive.

10. Which HTML tag improves the accessibility of a form?

A <label>

B <fieldset>

C <input>

D <legend>

The <label> tag associates descriptive text with a form field. It is particularly important for accessibility, as it helps screen readers interpret the form better.

1. Which type of <input> element allows creating a field to enter a color?

2. Which HTML attribute is used to add a descriptive label to a form field?

3. Which CSS property controls the duration of a transition?

4. Which CSS property is used to define the spacing between the rows of a CSS grid?

5. Which HTML tag allows you to include a responsive image that adapts to screen size?

6. Which CSS property allows you to add transparency to a color?

7. Which HTML tag makes a video responsive (adapts to screen size)?

8. Which CSS pseudo-class targets a link after it has been visited by the user?

9. How do you make a background image responsive with CSS?

10. Which HTML tag improves the accessibility of a form?

You May Also Like

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

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

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

Leave a Reply Cancel reply