COURSE 5: INTRODUCTION TO HTML, CSS, & JAVASCRIPT

Module 2: CSS Overview & HTML5 Elements

IBM AI DEVELOPER PROFESSIONAL CERTIFICATE

Complete Coursera Study Guide

Enroll in Coursera IBM AI Developer Professional Certificate

Last updated:

TABLE OF CONTENT

INTRODUCTION – CSS Overview & HTML5 Elements

HTML5 offers numerous elements that enable developers to create well-structured and diverse websites. CSS, a style sheet language, defines how HTML elements are displayed. By combining HTML5 and CSS, developers can craft rich, interactive applications. HTML5 elements provide ways to divide an HTML document into sections, create headers and footers, define various sections, create headings, and structure the body of the document.

Additionally, HTML5 includes elements that allow users to interact with the website, inputting information in formats such as dates, times, numbers, email addresses, and more. HTML handles data transmission to the browser, while CSS applies design to that data. To create the desired structure and style for your site, familiarity with both languages is essential.

Learning Objectives

  • Describe how CSS is used to enhance websites.
  • Describe how to use CSS to format HTML elements.
  • Differentiate between the types of CSS frameworks.
  • List the advantages and disadvantages of the CSS frameworks.
  • Describe the basic structural elements of HTML5.
  • Describe the attributes of HTML5 input elements.

PRACTICE QUIZ

1. What makes a Style Sheet “Cascading”?

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

Correct: A child element will inherit all of the styling of its parent element, with a couple of exceptions.

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

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

Correct: Utility-first Frameworks are composed of utility classes, which reference single-purpose CSS.

Correct: Since the utility classes are used in the “class” attribute of HTML elements, your HTML markup becomes more verbose.

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

  • <div> (CORRECT)
  • <input>
  • <body>
  • <nav>

Correct: The <div> tag separates areas in a document into divisions

4. What type of element is <article>?

  • A graphic element
  • A semantic element (CORRECT)
  • An input element
  • A multimedia element

Correct: <article> is a semantic element as it is used to define a part of the web page

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

  • <image>
  • <figure> (CORRECT)
  • <img>
  • <figcaption>

Correct: The <figure> tag specifies self-contained element referred to from the main content

GRADED QUIZ

1. Which of the following ways of applying CSS has the highest priority, and will override the other ways?

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

Correct: Inline CSS has the highest order of precedence, and will override other styles. Review the “CSS – Styling HTML” video for more details on this.

2. Select all of the following which are true in describing a fluid and/or fixed layout.

  • A fixed layoutspecifies element sizes using percentages
  • Fluid layouts should always be used when designing a website
  • Fixed layouts are independent of screen sizes, and their values do not change (CORRECT)
  • Elements in a fluidlayout have flexible widths and heights (CORRECT)

Correct: Fixed layouts specify the height and width of elements which remain the same regardless of how the website is accessed. Review the “CSS – Styling HTML” video for more details on this.

Correct: The widths and heights of elements in a fluid layout are flexible and can change. Review the “CSS – Styling HTML” video for more details on this.

3. Which of the following tags define a caption for a < fieldset > element?

  • <title>
  • <caption>
  • <label>
  • <legend> (CORRECT)

Correct: The <legend> tag is used to define a caption for a < fieldset > element. Review the “Additional HTML Elements” reading for more details on this.

4. What is a modifier?

  • A type of button which allows you to modify content in a form
  • The term used to refer to a JavaScript class which updates content on a webpage
  • A special class modifies the appearance of elements by applying a CSS attribute based on the condition described (CORRECT)
  • A method used to modify CSS styling applied to an HTML element

Correct: Modifiers are used in utility frameworks, such as Tailwind CSS, to conditionally apply a utility class to an element. Modifiers, which describe the condition you want to target, are added before a class name. Review the “CSS Frameworks” video for more details on this.

5. Which semantic tag is used to display any content which is indirectlyrelated to the main content of the document?

  • <section>
  • <aside> (CORRECT)
  • <article>
  • <details>

Correct: The <aside> tag provides additional information that is related to the main content. Review the “Common HTML5 Tags and Structural Elements” reading for more details on this.

6. Which type of input control would be most apt for selecting heightin a form?

  • Range
  • number (CORRECT)
  • list
  • tel

Correct: Using the `number` type would allow the user to enter any custom number, as well as allow you to set a range/step (e.g. if you only want to allow whole numbers, with a maximum of 2m). Review the “HTML5 Input Element: Attributes for the Input Tag” video for more details on this.

7. Which of the following is a disadvantage of a Component Framework?

  • It is more difficult to maintain a uniform style throughout the website
  • HTML markup is more verbose since styles are mixed with content
  • Download size of HTML markup is increased
  • Components are limited only to what the framework provides (CORRECT)

Correct: Since component frameworks provide you with pre-styled components, you are limited to using these components. Styling anything else requires the use of Vanilla CSS or an additional framework. Review the “CSS Frameworks” video for more details on this.

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

  • <div>
  • <details>
  • <section>
  • <article> (CORRECT)

Correct: The <article> tag represents a block of code that can logically stand alone. Review the “Common HTML5 Tags and Structural Elements” reading for more details on this.

9. Which element defines a caption for the <figure> element?

  • <figcaption> (CORRECT)
  • <label> 
  • <legend>
  • <title>

Correct: The < figcaption > tag defines the caption for the contents of the < figure > element. Review the “Common HTML5 Tags and Structural Elements” reading for more details on this.

10. Which type of input control can be used to accept only numbers in a form?

  • Tel
  • Number (CORRECT)
  • integer
  • digit

Correct: The input type – number takes a numeric value as input. Review the “HTML5 Input Element: Attributes for the Input Tag” video for more details on this.

CONCLUSION – CSS Overview & HTML5 Elements

In conclusion, mastering both HTML5 and CSS is essential for any web developer aiming to create well-structured and visually appealing websites. HTML5 provides a robust framework with elements that organize content and facilitate user interactions, while CSS defines the visual presentation, bringing the structure to life. Together, these languages enable the development of rich, interactive applications, making it crucial for developers to be proficient in both to achieve the desired structure and style for their sites.

Previous Module
Next Module

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Expanded Thumbnail Promo1

Mood Zone for Studying & Relaxing