Module 2: CSS Overview & HTML5 Elements

Looking for ‘Introduction to HTML, CSS, & JavaScript Module 2 Answers’?

In this post, I provide complete, accurate, and detailed explanations for the answers to Module 2: CSS Overview & HTML5 Elements of Course 5: Introduction to HTML, CSS, & JavaScript – IBM AI Developer Professional Certificate .

Whether you’re preparing for quizzes or brushing up on your knowledge, these insights will help you master the concepts effectively. Let’s dive into the correct answers and detailed explanations for each question!

Practice Quiz

Practice Assignment

1. What makes a Style Sheet “Cascading”?

  • Child elements inherit styles that are defined for parent elements ✅
  • Parent elements inherit styles that are defined for child elements
  • Elements inherit styles that are defined before them in a CSS document
  • Each element has a unique style, unrelated to its’ parent

Explanation:
The “cascading” nature of CSS means styles can flow down (or cascade) from parent elements to child elements. It also refers to the priority system of CSS rules (specificity, order, etc.), but in this context, inheritance best fits.

2. Which of the following describes a Utility-first Framework? Select all that apply.

  • References CSS properties via Utility Classes ✅
  • Provides pre-styled components and templates
  • Makes HTML markup more verbose by mixing styles with content ✅
  • Provides complete freedom when styling elements

Explanation:
Utility-first frameworks like Tailwind CSS promote using utility classes (like text-center, p-4) directly in HTML to control styling, making the markup more verbose. It also allows complete freedom without enforcing pre-styled components.

3. Which of the following tags is used to separate areas in a document?

  • <input>
  • <body>
  • <nav>
  • <div> ✅

Explanation:
The <div> tag is a block-level element used as a generic container to group and style parts of the document.

4. What type of element is
?

  • A multimedia element
  • A semantic element ✅
  • A graphic element
  • An input element

Explanation:
<article> is a semantic HTML5 element used to define independent, self-contained content (e.g., blog post, news article).

5. Which tag is used to specify self-contained content like an image, illustration, or diagram?

  • <img>
  • <figcaption>
  • <figure> ✅
  • <image>

Explanation:
<figure> is used to wrap media content like images or diagrams along with an optional <figcaption>. It’s for self-contained content that’s referenced in the main content.

Graded Quiz: CSS Overview & HTML5 Elements

Graded Assignment

6. You’ve applied an external CSS file and used inline style for a few elements to style a webpage. However, one element does not reflect the external style rules. What could have caused this issue on the webpage?

  • Internal CSS, applied within the “<style>” attribute in HTML markup
  • An external CSS file
  • Inline CSS, placed directly in each HTML element ✅
  • Whichever way is specified in the HTML markup

Explanation:
Inline CSS has higher specificity than external or internal styles. If an element has inline styles, those will override the external stylesheet.

7. A company is designing a website that needs to look good on both desktops and mobile devices. Which of the following statements about fluid and fixed layouts are correct? Select all that apply.

  • Fixed layouts use percentage-based dimensions for consistent element sizing.
  • Fixed layouts remain the same size regardless of the viewport dimensions. ✅
  • All modern websites should only use fluid layouts for consistency.
  • A fluid layout adjusts element widths proportionally based on the screen size. ✅

Explanation:

  • Fixed layouts use px-based widths, so they don’t respond to screen size.
  • Fluid layouts use % or vw units to adapt to the screen size.

8. A user fails to submit a form on the website. It shows only the field that is already filled as an example in a light grey color. However, the example text disappears on focus. What is the possible bug here?

  • type= “tel” is the only value.
  • The field misses required attributes ✅
  • Value has incorrect email format.
  • Unsupportive input type= “color”

Explanation:
The placeholder disappearing on focus is normal behavior, but if the form fails to submit without warning, it may be because the required or other validation attributes are missing.

9. You are working on a responsive web design using a CSS framework and need to apply styles based on different states, such as hover or focus. To achieve this, you use a modifier. What is the purpose of a modifier?

  • A technique for altering CSS styles applied to an HTML element
  • A type of button that enables users to edit form content
  • A specialized class that adjusts an element’s appearance by applying CSS based on a specified condition ✅
  • A term used for a JavaScript class that dynamically updates webpage content

Explanation:
Modifiers (like hover:bg-blue-500 in Tailwind) are used to apply different visual states based on interactions or conditions (hover, focus, etc.).

10. You are writing a self-contained and meaningful blog using HTML5. Which of the following tags is the most suitable?

  • <article> ✅
  • <section>
  • <details>
  • <aside>

Explanation:
<article> is designed for independent, self-contained content, such as blog posts, news, etc.

11. In a web form, you are asking users to enter their age, limited to 5 to 25 years only. Which HTML5 attributes has the developer used to limit the age field?

  • list
  • range
  • number ✅
  • tel

Explanation:

  • To collect age, which is a numeric input, the correct type is <input type="number">.
  • To limit the age range to 5–25, the developer should use the min and max attributes with the number input type.

12. Which of the following is a disadvantage of a component framework?

  • Increase in the download size of the HTML markup
  • Limited components to only what the framework provides ✅
  • Difficult to maintain a uniform style throughout the website
  • HTML markup is more verbose since styles mix with content

Explanation:
Component frameworks like Bootstrap or Material UI offer predefined components.
The downside:

  • You’re limited to what’s included, unless you customize or extend them.
  • The markup can be verbose, but that’s not the primary disadvantage compared to the constraint of predefined components.

13. Which tag is used to represent an independent item of content in a document, which can be meaningful on its own?

  • <details>
  • <div>
  • <article> ✅
  • <section>

Explanation:
<article> is used for standalone content that could be syndicated or reused elsewhere.

14. A web designer wants to change the font and background color for all headings on the website. Which technology will he use?

  • Flash
  • JavaScript
  • HTML
  • CSS ✅

Explanation:
CSS is used to style HTML elements, including typography, colors, spacing, etc.

15. You’ve embedded a chart using the figure element in your webpage. Now you want to add a descriptive title directly in the chart. Which HTML5 tag will you use to complete this task?

  • Footer
  • Header
  • Figcaption ✅
  • Figure

Explanation:
<figcaption> provides a caption or title for a <figure> element, and it should be nested inside it.

Related contents:

Module 1: HTML Overview
Module 3: JavaScript Programming for Web Applications
Module 4: Career Opportunities and Final Project

You might also like:

Course 1: Introduction to Software Engineering
Course 2: Introduction to Artificial Intelligence (AI)
Course 3: Generative AI: Introduction and Applications
Course 4: Generative AI: Prompt Engineering Basics
Course 6: Python for Data Science, AI & Development
Course 7: Developing AI Applications with Python and Flask
Course 8: Building Generative AI-Powered Applications with Python
Course 9: Generative AI: Elevate your Software Development Career
Course 10: Software Developer Career Guide and Interview Preparation

Leave a Reply