Web · Introduction to CSS
Quizz
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercises
Exercise 1 — Correct HTML Document Structure
Which of the following represents the correct basic structure of an HTML document?
Options
• <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>Heading</h1> <p>Paragraph</p> </body> </html>
• <html> <head> <title>Page Title</title> </head> <body> <h1>Heading</h1> <p>Paragraph</p> </body> </html>
• <!DOCTYPE html> <body> <head> <title>Page Title</title> </head> <h1>Heading</h1> <p>Paragraph</p> </body>
• <!DOCTYPE html> <html> <title>Page Title</title> <body> <h1>Heading</h1> <p>Paragraph</p> </body> </html>
Hint : Consider the required elements and their correct nesting order in an HTML document.
Exercise 2 — Complete the HTML Document
Complete the HTML document structure with the appropriate tags:
<!DOCTYPE html> ____ ____ <title>Codémon Types</title> ____ ____ ____Codémon Types____ <p>Discover the different types of Codémon!</p> ____ ____
Options: <html> <head> </head> <body> <h1> </h1> </body> </html>
Hint : Think about the required structure of an HTML document and the proper nesting of tags.
Exercise 3 — Correct Heading Hierarchy
Which of the following represents the correct hierarchical structure for headings?
Options
• <h1>Codémon Types</h1> <h2>Water Types</h2> <h3>Aquachu</h3> <h2>Fire Types</h2> <h3>Pyrochu</h3>
• <h1>Codémon Types</h1> <h3>Water Types</h3> <h5>Aquachu</h5> <h3>Fire Types</h3> <h5>Pyrochu</h5>
• <h3>Codémon Types</h3> <h2>Water Types</h2> <h1>Aquachu</h1> <h2>Fire Types</h2> <h1>Pyrochu</h1>
• <h1>Codémon Types</h1> <h1>Water Types</h1> <h1>Aquachu</h1> <h1>Fire Types</h1> <h1>Pyrochu</h1>
Hint : Consider the proper use of heading levels for creating a hierarchical structure in your document.
Exercise 4 — HTML Elements and Their Purpose
Match each HTML element with its correct purpose:
Items to match
• <p>
• <div>
• <span>
• <ul>
Definitions
• Creates a paragraph of text
• Creates a block-level container
• Creates an inline container
• Creates an unordered list
Exercise 5 — Correct List Structure
Which of the following is the correct way to create an ordered list?
Options
• <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
• <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
• <ol> <p>First item</p> <p>Second item</p> <p>Third item</p> </ol>
• <li>First item</li> <li>Second item</li> <li>Third item</li>
Hint : Consider what makes a list ordered and which elements are required to create a proper list structure.
Exercise 6 — Complete the List Structure
Complete the HTML code to create a list (unorderer) of Codémon types:
<!DOCTYPE html> <html> <body> <h1>Codémon Types</h1> ____ ____Water____ ____Fire____ ____Plant____ ____ </body> </html>
Options: <ul> </ul> <ol> </ol> <li> </li> <li> </li> <li> </li>
Hint : Think about how to properly structure an unordered list with list items.
Exercise 7 — Block vs. Inline Elements
Which of the following is NOT a block-level element?
Options
• ```<span>```
• ```<div>```
• ```<h1>```
• ```<p>```
Hint : Consider the difference between block elements (which start on a new line) and inline elements (which flow within text).
Exercise 8 — CSS Application Methods
Match each CSS application method with its correct example:
Items to match
• Inline CSS
• Internal CSS
• External CSS
• CSS rule syntax
Definitions
• <p style="color: red;">Text</p>
• <head> <style> p { color: red; } </style> </head>
• <head> <link rel="stylesheet" href="styles.css"> </head>
• selector { property: value; }
Exercise 9 — CSS Color Values
Which of the following is NOT a valid way to specify the color red in CSS?
Options
• ```color: rgb(255, 0, 0);```
• ```color: #FF0000;```
• ```color: red;```
• ```color: Red();```
Hint : Consider the different valid ways to specify colors in CSS (named colors, hex values, RGB functions, HSV functions, etc.).
Exercise 10 — Complete the CSS Color Properties
Complete the CSS code to set : - h1 text color to blue - h1 background color to yellow - p text color to green - p background color to light gray
<style> h1 { ____ blue; ____ yellow; } p { color: ____; background-color: ____; } </style>
Options: color: background-color: green lightgray text-color: bg-color:
Hint : Consider which CSS properties control text color and background color.
Exercise 11 — Border Shorthand Property
Which of the following is the correct order for the border shorthand property?
Options
• ```width, style, color```
• ```style, width, color```
• ```color, width, style```
• ```width, color, style```
Hint : Consider the standard order for the border shorthand property.
Exercise 12 — Complete the Border Properties
Complete the CSS code to create : - A blue border of 2px around a div - Rounded corners of 10px for the div - A red dashed bottom border of 3px around a paragraph - Rounded corners of 50% for the paragraph
<style> div { ____ 2px solid blue; ____ 10px; } p { border-____ 3px dashed red; border-radius: ____; } </style>
Options: border: border-radius: bottom: 50% size: corner-radius:
Hint : Consider which properties control borders and rounded corners.
Exercise 13 — Border Properties and Their Effects
Match each border property with its effect:
Items to match
• border-width
• border-style
• border-color
• border-radius
Definitions
• Sets how thick the border is
• Sets whether the border is solid, dashed, etc.
• Sets the color of the border
• Controls how rounded the corners are
Exercise 14 — Margin vs. Padding
What is the main difference between margin and padding in CSS?
Options
• Margin creates space outside the element, padding creates space inside the element
• Margin affects text only, padding affects the entire element
• Margin can only be used with block elements, padding with inline elements
• Margin is always visible, padding is only visible with a border
Hint : Think about where each property creates space relative to an element's border.
Exercise 15 — Complete the Spacing Properties
Complete the CSS code to add: - 20px padding inside a div - 10px margin outside the div - 15px margin on top of a paragraph - 5px padding on the left the paragraph
<style> div { ____ 20px; ____ 10px; background-color: lightblue; } p { margin-____ 15px; padding-____ 5px; } </style>
Options: padding: margin: top: left: space: gap:
Hint : Consider which properties control spacing inside and outside elements, and how to target specific sides.
Exercise 16 — CSS Box Model Components
Match each box model component with its description:
Items to match
• margin
• border
• padding
• content
Definitions
• Space outside the element, between the element and other elements
• Line around the element, between padding and margin
• Space inside the element, between content and border
• The actual text or media in the element
Exercise 17 — CSS Margin Shorthand
In the CSS shorthand
margin: 10px 20px 15px 5px;
, which side has a margin of 5px?
Options
• Left
• Right
• Top
• Bottom
Hint : Think about the order of values in the margin shorthand property. Tick-Tack..
Exercise 18 — Understanding CSS Shorthand Values
What will this CSS shorthand code do?
.codemon-card { margin: 10px 20px; }
Options
• 10px margin on top and bottom, 20px margin on left and right
• 10px margin on left and right, 20px margin on top and bottom
• 10px margin on top, 20px margin on the other three sides
• 10px margin on top and right, 20px margin on bottom and left
Hint : Think about how CSS applies values when there are only two values in a shorthand property.
Exercise 19 — Creating a Circle with CSS
Which CSS will create a perfect circle from a square <div> element?
Options
• ```border-radius: 50%;```
• ```border-radius: 100px;```
• ```border-radius: 100%;```
• ```border-circle: true;```
Hint : Consider how border-radius values work with percentages versus fixed pixels.
Exercise 20 — CSS Properties and Values
Match each CSS property with a valid value for it:
Items to match
• color
• border-style
• margin
• border-radius
Definitions
• #ff5500
• dashed
• 10px 5px
• 50%
Exercise 21 — Codémon Leaderboard Margins
You're styling a div and want specific spacing. What will this CSS do?
margin: 15px 5px 25px;
Options
• 15px margin on top, 5px on the sides, 25px on the bottom
• 15px margin on right, 5px on top, 25px on left, 0px on bottom
• 15px margin on bottom, 5px on sides, 25px on top
• 15px margin on left, 5px on top and bottom, 25px on right
Hint : Think about how CSS shorthand for margin works.
Exercise 22 — Codémon Arena Spacing
You're designing a Codémon battle arena with this CSS. What spacing will it have?
.battle-arena { padding: 30px 10px 5px; }
Options
• 30px top, 10px right and left, 5px bottom
• 30px left, 10px top and bottom, 5px right
• 30px bottom, 10px right and left, 5px top
• 30px on all sides, then 10px extra on right, 5px extra on bottom
Hint : Think about shorthand CSS syntax for padding and margin.
Exercise 23 — Total Element Width Calculation
If an element has width: 300px, padding: 10px on all sides, border: 5px on all sides, and margin: 15px on all sides, what is its total width including margin?
Options
• 360px
• 350px
• 330px
• 340px
Hint : Calculate the total width by adding everything, it's simple math.
Exercise 24 — Spot the CSS Error
Which line in this CSS code is incomplete?
/* Codémon card styling */ .card { width: 200px; padding: 15px; border: 2px solid blue; margin: 20px 10px 5px 10px background-color: lightblue; border-radius: 10px; }
Options
• ```margin: 20px 10px 5px 10px```
• ```border: 2px solid blue;```
• ```padding: 15px;```
• ```background-color: lightblue;```
Hint : Look carefully at each line. Check for missing punctuation or incorrect property order.
Exercise 25 — Proper HTML Nesting
Which of the following demonstrates correct HTML element nesting?
Options
• ```<p>This is a <strong>bold</strong> statement.</p>```
• ```<p>This is a <strong>bold statement.</p>``` ```</strong>```
• ```<p>This is a bold</strong> statement.</p>```
• ```<strong>``` ``` <p>This is a bold statement.</strong>``` ``` </p>```
Hint : Consider the proper nesting of HTML elements and how tags should be closed in the reverse order they were opened.
← Previous lesson : Margin and PaddingNext lesson : Element selectors →
Back to the course