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

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 HTML tag is ideal for displaying a PDF file directly in a web page?

A <embed>

B <object>

C <iframe>

D <pdf>

The <object> tag can be used to embed an external file, such as a PDF, in a page. This tag allows specifying a file type (such as application/pdf) and rendering the object interactively on the page. Example:

<object data="file.pdf" type="application/pdf" width="600" height="400">  
  <p>Your browser does not support PDF files. You can <a href="example.pdf">download the PDF here</a></p>  
</object>

2. Which HTML tag is used to specify a section of code on a web page?

A <code>

B <script>

C <pre>

D <program>

The <code> tag is used to mark computer code in an HTML document. It is often accompanied by the <pre> tag to preserve the indentation and line breaks of the code.

3. Which tag is used to emphasize text in italics?

A <i>

B <em>

C <italic>

D <span>

The <em> tag is used to indicate that the text it contains should be emphasized, usually in italics. Unlike <i>, which is purely stylistic, <em> has semantic meaning and can be used to emphasize a word or phrase.

4. You want to apply a style to all <h1>, <h2>, and <h3> elements at the same time. What is the correct CSS syntax?

A h1, h2, h3 { color: red; }

B h1 + h2 + h3 { color: red; }

C h1 h2 h3 { color: red; }

D h1:h2:h3 { color: red; }

The correct syntax to apply a style to multiple elements at the same time is to separate them by commas, like in h1, h2, h3. This will apply the style to all <h1>, <h2>, and <h3> elements. The other options are either incorrect or apply styles based on a selection relationship, which is not what you’re looking for.

5. You want to apply a style only to the last <li> element in a list, without knowing how many elements the list contains. Which CSS selector would you use?

A li:last-of-type

B li:last-child

C li:nth-last-child(1)

D li:last

The li:last-child selector allows targeting the last <li> element of a parent, regardless of the list structure. If you want to specifically target the last <li> among other types of elements in a parent, you could use li:last-of-type.

6. You want to apply a style to all <div> elements except those that have the class `.selected`. Which CSS selector would you use?

A div:not(.selected)

B div.selected

C div:not.selected

D div :not(.selected)

The div:not(.selected) selector allows targeting all <div> elements that do not have the .selected class. This excludes elements with that class from the selection, applying a style to all others.

7. Which CSS selector allows targeting all <div> elements that are hidden (for example, with `display: none`)?

A div:hidden

B div[hidden]

C div:visible

D There is no CSS selector for that

The div[hidden] selector targets all <div> elements that have the hidden attribute, which indicates that they are hidden by the browser. There is no direct CSS selector for elements hidden with display: none, but you can use JavaScript to detect this condition.

8. You want to apply a style to a form field only when it is focused and its content is empty. Which CSS selector would you use?

A input:focus:empty

B input:focus

C input:empty:focus

D input:focus:not(:empty)

The input:focus:empty selector allows targeting a form field <input> that is both focused and empty. This works well for fields like text areas or input fields where you want to apply a style if the field is empty and focused.

9. Imagine you have several buttons, some with the class btn-primary and others with the class btn-secondary. You want to apply a style only to the buttons that have both classes. Which CSS selector would you use?

A .btn-primary .btn-secondary

B .btn-primary + .btn-secondary

C .btn-primary.btn-secondary

D .btn-primary, .btn-secondary

The .btn-primary.btn-secondary selector targets elements that have both the btn-primary and btn-secondary classes at the same time. Unlike a simple , which selects elements with either class, this selector specifically targets elements that have both classes.

10. Which tag is used to add a box around an image with a caption?

A <figure>

B <image>

C <caption>

D <frame>

The <figure> tag is used to group an image with its caption, which is defined inside the <figcaption> tag. This semantically structures the image and the caption together, while providing additional styling options. Example:

<figure>    
<img src="image.jpg" width="600" height="400">    
<figcaption>Here is the caption for the image: A beautiful view of the sea.</figcaption>  
</figure>

1. Which HTML tag is ideal for displaying a PDF file directly in a web page?

2. Which HTML tag is used to specify a section of code on a web page?

3. Which tag is used to emphasize text in italics?

4. You want to apply a style to all <h1>, <h2>, and <h3> elements at the same time. What is the correct CSS syntax?

5. You want to apply a style only to the last <li> element in a list, without knowing how many elements the list contains. Which CSS selector would you use?

6. You want to apply a style to all <div> elements except those that have the class .selected. Which CSS selector would you use?

7. Which CSS selector allows targeting all <div> elements that are hidden (for example, with display: none)?

8. You want to apply a style to a form field only when it is focused and its content is empty. Which CSS selector would you use?

9. Imagine you have several buttons, some with the class btn-primary and others with the class btn-secondary. You want to apply a style only to the buttons that have both classes. Which CSS selector would you use?

10. Which tag is used to add a box around an image with a caption?

You May Also Like

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

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

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

Leave a Reply Cancel reply

6. You want to apply a style to all <div> elements except those that have the class `.selected`. Which CSS selector would you use?

7. Which CSS selector allows targeting all <div> elements that are hidden (for example, with `display: none`)?