HTML and CSS Fundamentals Mastery

1. An element with position: static will ignore the top, right, bottom, and ______ properties.

Margin

Left

Padding

Display

An element with position: static does not respond to positioning properties such as top, right, bottom, and left, which are used to adjust its placement on the page. Instead, static positioning means the element is positioned according to the normal flow of the document. Therefore, the left property, which would typically shift the element horizontally, is also ignored. This ensures that the element remains in its original position relative to surrounding elements, maintaining the default layout behavior of the document.

Explanation

An element with position: static does not respond to positioning properties such as top, right, bottom, and left, which are used to adjust its placement on the page. Instead, static positioning means the element is positioned according to the normal flow of the document. Therefore, the left property, which would typically shift the element horizontally, is also ignored. This ensures that the element remains in its original position relative to surrounding elements, maintaining the default layout behavior of the document.

2. Three nested divs: outer (position: relative) > middle (position: static) > inner (position: absolute). Relative to which div is inner positioned?

Outer

Middle

The <body> element

The browser viewport

3. Two overlapping boxes in the same stacking context: #boxA { z-index: 1; } and #boxB { z-index: 2; }. Which box appears on top?

#boxB, because a higher z-index stacks on top of a lower one.

#boxA, because lower numbers take priority in CSS.

Whichever element is declared first in the HTML markup.

Whichever element has the larger dimensions.

4. Given: .header { position: fixed; top: 0; width: 100%; } What happens as the user scrolls down the page?

It stays permanently locked to the top of the screen while content scrolls beneath it.

It scrolls out of view normally with the rest of the page.

It sticks to the top until its parent container ends, then scrolls away.

It disappears completely until the user scrolls back to the top.

5. The parent has position: relative. The child has: position: absolute; top: 0; right: 0; Where does the child appear?

At the top-right corner of the parent element

At the top-right corner of the browser viewport

At the top-left corner of the parent element

Directly beneath the parent element

6. Given: .box { position: absolute; top: 0; left: 0; } The parent of .box has no position set. Where does .box appear?

At the top-left corner of the initial containing block (<html> / viewport)

At the top-left corner of its immediate parent container

It defaults back to normal document flow in place

At the center of the viewport

7. Given: .box { position: relative; top: 20px; left: 10px; } What happens to .box, and do surrounding elements fill its original spot?

.box shifts 20px down and 10px right; surrounding elements do not fill the original space.

.box shifts 20px down and 10px right; surrounding elements collapse into the original space.

.box shifts 20px up and 10px left; surrounding elements remain unchanged.

.box remains static because relative positioning requires a positioned ancestor.

8. Which CSS centers a 200px by 200px .box exactly in the middle of a relatively positioned parent?

.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; }

.box { position: relative; top: 50%; left: 50%; transform: translate(50%, 50%); width: 200px; height: 200px; }

.box { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; }

.box { position: fixed; top: 0; left: 0; margin: auto; width: 200px; height: 200px; }

9. What CSS declaration must be added to .container so that any child with position: absolute is positioned relative to .container?

Position: relative;

Display: flex;

Position: static;

Overflow: visible;

10. Which CSS nudges a .badge 5px down and 5px to the right from its default spot without shifting surrounding elements?

.badge { position: relative; top: 5px; left: 5px; }

.badge { position: absolute; top: 5px; left: 5px; }

.badge { margin-top: 5px; margin-left: 5px; }

.badge { position: static; top: 5px; left: 5px; }

11. Which CSS pins a .chat-button to the bottom-right corner of the screen (20px from each edge) so it never moves when scrolling?

.chat-button { position: absolute; bottom: 20px; right: 20px; }

.chat-button { position: sticky; bottom: 20px; right: 20px; }

.chat-button { position: fixed; bottom: 20px; right: 20px; }

.chat-button { position: relative; bottom: 20px; right: 20px; }

12. Which CSS makes a .navbar stick to the top of the viewport as the user scrolls down the page?

.navbar { position: relative; top: 0; }

.navbar { position: sticky; top: 0; }

.navbar { position: absolute; top: 0; }

.navbar { position: static; top: 0; }

Using `position: sticky;` in CSS allows an element to behave like a relatively positioned element until it reaches a specified scroll position, at which point it becomes fixed in place. By setting `top: 0;`, the `.navbar` will stick to the top of the viewport as the user scrolls down the page, providing a consistent navigation experience. This is particularly useful for keeping navigation menus visible without taking them out of the document flow entirely, as would happen with `position: fixed;`.

Explanation

Using `position: sticky;` in CSS allows an element to behave like a relatively positioned element until it reaches a specified scroll position, at which point it becomes fixed in place. By setting `top: 0;`, the `.navbar` will stick to the top of the viewport as the user scrolls down the page, providing a consistent navigation experience. This is particularly useful for keeping navigation menus visible without taking them out of the document flow entirely, as would happen with `position: fixed;`.

13. Which CSS rule positions a .card 10px from the top and 15px from the right using absolute positioning?

.card { position: absolute; top: 10px; right: 15px; }

.card { position: relative; top: 10px; right: 15px; }

.card { position: absolute; margin-top: 10px; margin-right: 15px; }

.card { position: fixed; y: 10px; x: 15px; }

This CSS rule uses absolute positioning, which allows the element to be positioned relative to its nearest positioned ancestor. By setting `top: 10px` and `right: 15px`, the `.card` class is placed 10 pixels from the top and 15 pixels from the right of that ancestor. This precise positioning is crucial for layout design, ensuring that the card appears exactly where intended on the page, regardless of other elements. The other options either use incorrect properties or positioning methods that do not achieve the desired effect.

Explanation

This CSS rule uses absolute positioning, which allows the element to be positioned relative to its nearest positioned ancestor. By setting `top: 10px` and `right: 15px`, the `.card` class is placed 10 pixels from the top and 15 pixels from the right of that ancestor. This precise positioning is crucial for layout design, ensuring that the card appears exactly where intended on the page, regardless of other elements. The other options either use incorrect properties or positioning methods that do not achieve the desired effect.

14. The CSS property used to control which positioned element visually sits on top of another is ______.

Layer-order

Stack-level

Z-index

Elevation

The z-index property in CSS determines the stacking order of positioned elements on a web page. Elements with a higher z-index value are rendered on top of those with a lower value. This property is only effective on elements that have a position value other than static (e.g., relative, absolute, or fixed). By manipulating the z-index, developers can control which elements overlap and how they are visually presented, making it a crucial tool for layout design and ensuring the correct display of content.

Explanation

The z-index property in CSS determines the stacking order of positioned elements on a web page. Elements with a higher z-index value are rendered on top of those with a lower value. This property is only effective on elements that have a position value other than static (e.g., relative, absolute, or fixed). By manipulating the z-index, developers can control which elements overlap and how they are visually presented, making it a crucial tool for layout design and ensuring the correct display of content.

15. If you set position: absolute on an element and none of its ancestors are positioned, it will be placed relative to the ______.

Initial containing block (<html> / viewport)

Immediate parent <div>

<body> element margin box

Center of the screen

When an element is set to `position: absolute`, it is removed from the normal document flow and positioned relative to its nearest positioned ancestor. If no ancestor elements have a positioning context (i.e., they are not set to `relative`, `absolute`, or `fixed`), the element will instead be positioned relative to the initial containing block, which is typically the viewport or the `` element. This means it will align itself based on the overall layout of the page rather than any specific parent element.

Explanation

When an element is set to `position: absolute`, it is removed from the normal document flow and positioned relative to its nearest positioned ancestor. If no ancestor elements have a positioning context (i.e., they are not set to `relative`, `absolute`, or `fixed`), the element will instead be positioned relative to the initial containing block, which is typically the viewport or the `` element. This means it will align itself based on the overall layout of the page rather than any specific parent element.

16. Which tag is used to define the root of an HTML document?

<head>

<html>

<body>

The `` tag is used to define the root element of an HTML document. It serves as the container for all other elements within the page, including the `

` and `` sections. This tag indicates to the web browser that the content enclosed is written in HTML, ensuring proper rendering of the document. Without the `` tag, the browser would not recognize the structure of the HTML content, leading to potential display issues.

Explanation

The `` tag is used to define the root element of an HTML document. It serves as the container for all other elements within the page, including the `

` and `` sections. This tag indicates to the web browser that the content enclosed is written in HTML, ensuring proper rendering of the document. Without the `` tag, the browser would not recognize the structure of the HTML content, leading to potential display issues.

17. Position: sticky behaves like positioning until a scroll threshold is crossed, then it behaves like positioning.

Static; absolute

Relative; fixed

Fixed; relative

Relative; absolute

Position: sticky initially behaves like relative positioning, allowing elements to remain in their normal flow within the document. However, once the user scrolls past a defined threshold, the element switches to fixed positioning, detaching from the flow and remaining visible at a specified position in the viewport. This combination allows for dynamic layouts where elements can scroll with the page until a certain point, enhancing user experience by keeping important content accessible.

Explanation

Position: sticky initially behaves like relative positioning, allowing elements to remain in their normal flow within the document. However, once the user scrolls past a defined threshold, the element switches to fixed positioning, detaching from the flow and remaining visible at a specified position in the viewport. This combination allows for dynamic layouts where elements can scroll with the page until a certain point, enhancing user experience by keeping important content accessible.

18. Position: fixed positions an element relative to the ______ (it stays put even when the page is scrolled).

Document <body>

Viewport (browser window)

Nearest positioned ancestor

Scrollable parent element

Position: fixed positions an element relative to the viewport, meaning it remains in the same spot on the screen regardless of scrolling. This allows for consistent visibility of the element, such as a navigation bar or a floating action button, enhancing user experience by keeping important controls accessible at all times. Unlike other positioning methods, fixed positioning does not depend on any ancestor elements, making it a powerful tool for web design.

Explanation

Position: fixed positions an element relative to the viewport, meaning it remains in the same spot on the screen regardless of scrolling. This allows for consistent visibility of the element, such as a navigation bar or a floating action button, enhancing user experience by keeping important controls accessible at all times. Unlike other positioning methods, fixed positioning does not depend on any ancestor elements, making it a powerful tool for web design.

19. An element with position: absolute is positioned relative to its nearest ancestor that has a position value other than ______.

Static

Relative

Fixed

Sticky

An element with `position: absolute` is positioned relative to its closest ancestor that has a positioning context, which is defined by having a position value of `relative`, `fixed`, or `sticky`. If no such ancestor exists, it defaults to positioning itself relative to the initial containing block, typically the viewport. Since `static` is the default positioning value and does not create a positioning context, an absolutely positioned element will ignore any ancestor with a `static` position, making it the correct answer.

Explanation

An element with `position: absolute` is positioned relative to its closest ancestor that has a positioning context, which is defined by having a position value of `relative`, `fixed`, or `sticky`. If no such ancestor exists, it defaults to positioning itself relative to the initial containing block, typically the viewport. Since `static` is the default positioning value and does not create a positioning context, an absolutely positioned element will ignore any ancestor with a `static` position, making it the correct answer.

20. To move an element relative to its normal position while keeping its original space in the page flow, you use position: ______.

Absolute

Fixed

Relative

Static

Using `position: relative` allows an element to be positioned relative to its original location in the document flow. This means that while you can adjust its position using top, right, bottom, or left properties, the space it originally occupied remains unchanged. This is useful for creating layouts where you want to shift elements without affecting the surrounding elements, maintaining the overall structure of the page.

Explanation

Using `position: relative` allows an element to be positioned relative to its original location in the document flow. This means that while you can adjust its position using top, right, bottom, or left properties, the space it originally occupied remains unchanged. This is useful for creating layouts where you want to shift elements without affecting the surrounding elements, maintaining the overall structure of the page.

21. The default value of the CSS `position` property is ______.

Static

Relative

Absolute

Fixed

In CSS, the default value of the `position` property is `static`. This means that elements are positioned according to the normal flow of the document, without any special positioning rules applied. When an element has a position of `static`, it does not respond to the top, right, bottom, or left properties, and it will be placed in the order it appears in the HTML. This default behavior ensures a predictable layout unless explicitly changed by using other positioning values like `relative`, `absolute`, or `fixed`.

Explanation

In CSS, the default value of the `position` property is `static`. This means that elements are positioned according to the normal flow of the document, without any special positioning rules applied. When an element has a position of `static`, it does not respond to the top, right, bottom, or left properties, and it will be placed in the order it appears in the HTML. This default behavior ensures a predictable layout unless explicitly changed by using other positioning values like `relative`, `absolute`, or `fixed`.

22. Which HTML tag defines a row in a table?

<td>

<th>

<table>

<tr>

The `

` tag is used in HTML to define a row within a table. Each row can contain one or more cells, which are defined using the `` tag for standard cells or the `` tag for header cells. The `` element helps organize data into horizontal sections, making it easier to read and understand the information presented in the table format.

Explanation

The `

` tag is used in HTML to define a row within a table. Each row can contain one or more cells, which are defined using the `` tag for standard cells or the `` tag for header cells. The `` element helps organize data into horizontal sections, making it easier to read and understand the information presented in the table format.

23. Which of the following correctly defines an unordered list with one item?

An unordered list in HTML is defined using the `

` tag, which stands for "list item." The structure `
- item
` correctly encapsulates a single item in an unordered list format, making it suitable for displaying items without a specific sequence. In contrast, the other options use incorrect or non-standard tags, making them invalid for creating an unordered list.

Explanation

An unordered list in HTML is defined using the `

` tag, which stands for "list item." The structure `
- item
` correctly encapsulates a single item in an unordered list format, making it suitable for displaying items without a specific sequence. In contrast, the other options use incorrect or non-standard tags, making them invalid for creating an unordered list.

24. Which tag specifies the title shown on the browser tab?

<head>

<title>

<meta>

The `

` tag is used within the `` section of an HTML document to define the title of the webpage. This title is displayed on the browser tab and is also used by search engines as the clickable headline for search results. It plays a crucial role in SEO and user experience, as it provides a concise description of the page's content.

Explanation

The `

` tag is used within the `` section of an HTML document to define the title of the webpage. This title is displayed on the browser tab and is also used by search engines as the clickable headline for search results. It plays a crucial role in SEO and user experience, as it provides a concise description of the page's content.

25. How do you write a comment in HTML?

// this is a comment

/* this is a comment */

# this is a comment

In HTML, comments are written using the syntax ``. This allows developers to include notes or explanations in the code that will not be displayed in the web browser. The comment begins with ``, effectively telling the browser to ignore any content within these markers. This feature is useful for documenting code or providing context without affecting the webpage's functionality. Other comment styles, such as those used in programming languages like JavaScript or CSS, are not applicable in HTML.

Explanation

In HTML, comments are written using the syntax ``. This allows developers to include notes or explanations in the code that will not be displayed in the web browser. The comment begins with ``, effectively telling the browser to ignore any content within these markers. This feature is useful for documenting code or providing context without affecting the webpage's functionality. Other comment styles, such as those used in programming languages like JavaScript or CSS, are not applicable in HTML.

26. Which tag is used to insert an image into a webpage?

<image>

<src>

<img>

The `` tag is used in HTML to embed images into a webpage. It allows developers to specify the source of the image through the `src` attribute, along with other attributes such as `alt` for alternative text, `width`, and `height`. This tag is essential for displaying visual content, enhancing user experience and engagement on websites. Unlike other tags listed, `` is specifically designed for image inclusion, making it the correct choice for this purpose.

Explanation

The `` tag is used in HTML to embed images into a webpage. It allows developers to specify the source of the image through the `src` attribute, along with other attributes such as `alt` for alternative text, `width`, and `height`. This tag is essential for displaying visual content, enhancing user experience and engagement on websites. Unlike other tags listed, `` is specifically designed for image inclusion, making it the correct choice for this purpose.

27. Which tag is used to create a hyperlink in HTML?

<link>

<href>

<a>

<url>

The `` tag in HTML is used to create hyperlinks, allowing users to click on text or images to navigate to another page or resource. The tag typically includes the `href` attribute, which specifies the URL of the destination. For example, `Visit Example` creates a clickable link that directs users to the specified website. This functionality is essential for web navigation and linking content across different pages or sites.

Explanation

The `` tag in HTML is used to create hyperlinks, allowing users to click on text or images to navigate to another page or resource. The tag typically includes the `href` attribute, which specifies the URL of the destination. For example, `Visit Example` creates a clickable link that directs users to the specified website. This functionality is essential for web navigation and linking content across different pages or sites.

28. Which of the following is the correct syntax for an HTML element with an attribute?

In HTML, an element is defined by a tag, and attributes provide additional information about that element. The correct syntax for an anchor tag includes the tag ``, followed by the attribute `href` to specify the link's destination, and the text that will be displayed as the link. Therefore, `link` correctly formats the anchor element with the `href` attribute, ensuring proper structure and functionality in HTML.

Explanation

In HTML, an element is defined by a tag, and attributes provide additional information about that element. The correct syntax for an anchor tag includes the tag ``, followed by the attribute `href` to specify the link's destination, and the text that will be displayed as the link. Therefore, `link` correctly formats the anchor element with the `href` attribute, ensuring proper structure and functionality in HTML.

29. Which tag contains the visible content of a webpage?

<head>

<meta>

<title>

<body>

The `

` tag contains all the visible content of a webpage, including text, images, and other media that users interact with. It is part of the HTML structure and is essential for rendering the content that users see in their web browsers. In contrast, the `` section holds meta-information, links to stylesheets, and scripts, which are not displayed directly on the page. Therefore, the `` tag is crucial for the user-facing part of a website.

Explanation

The `

` tag contains all the visible content of a webpage, including text, images, and other media that users interact with. It is part of the HTML structure and is essential for rendering the content that users see in their web browsers. In contrast, the `` section holds meta-information, links to stylesheets, and scripts, which are not displayed directly on the page. Therefore, the `` tag is crucial for the user-facing part of a website.

30. What must every HTML document begin with?

<html>

<head>

<!DOCTYPE html>

Every HTML document must begin with the `` declaration to inform the web browser about the version of HTML being used. This declaration ensures that the document is interpreted correctly and adheres to the standards of HTML5. It helps in rendering the page consistently across different browsers, preventing potential issues with layout and functionality. Without this declaration, browsers may switch to "quirks mode," which can lead to unexpected behavior in how the content is displayed.

Explanation

Every HTML document must begin with the `` declaration to inform the web browser about the version of HTML being used. This declaration ensures that the document is interpreted correctly and adheres to the standards of HTML5. It helps in rendering the page consistently across different browsers, preventing potential issues with layout and functionality. Without this declaration, browsers may switch to "quirks mode," which can lead to unexpected behavior in how the content is displayed.

HTML & CSS Fundamentals Mastery Quiz

1. An element with position: static will ignore the top, right, bottom, and ______ properties.

2.

What first name or nickname would you like us to use?

2. Three nested divs: outer (position: relative) > middle (position: static) > inner (position: absolute). Relative to which div is inner positioned?

3. Two overlapping boxes in the same stacking context: #boxA { z-index: 1; } and #boxB { z-index: 2; }. Which box appears on top?

4. Given: .header { position: fixed; top: 0; width: 100%; } What happens as the user scrolls down the page?

5. The parent has position: relative. The child has: position: absolute; top: 0; right: 0; Where does the child appear?

6. Given: .box { position: absolute; top: 0; left: 0; } The parent of .box has no position set. Where does .box appear?

7. Given: .box { position: relative; top: 20px; left: 10px; } What happens to .box, and do surrounding elements fill its original spot?

8. Which CSS centers a 200px by 200px .box exactly in the middle of a relatively positioned parent?

9. What CSS declaration must be added to .container so that any child with position: absolute is positioned relative to .container?

10. Which CSS nudges a .badge 5px down and 5px to the right from its default spot without shifting surrounding elements?

11. Which CSS pins a .chat-button to the bottom-right corner of the screen (20px from each edge) so it never moves when scrolling?

12. Which CSS makes a .navbar stick to the top of the viewport as the user scrolls down the page?

13. Which CSS rule positions a .card 10px from the top and 15px from the right using absolute positioning?

14. The CSS property used to control which positioned element visually sits on top of another is ______.

15. If you set position: absolute on an element and none of its ancestors are positioned, it will be placed relative to the ______.

16. Which tag is used to define the root of an HTML document?

17. Position: sticky behaves like positioning until a scroll threshold is crossed, then it behaves like positioning.

18. Position: fixed positions an element relative to the ______ (it stays put even when the page is scrolled).

19. An element with position: absolute is positioned relative to its nearest ancestor that has a position value other than ______.

20. To move an element relative to its normal position while keeping its original space in the page flow, you use position: ______.

21. The default value of the CSS `position` property is ______.

22. Which HTML tag defines a row in a table?

23. Which of the following correctly defines an unordered list with one item?

24. Which tag specifies the title shown on the browser tab?

25. How do you write a comment in HTML?

26. Which tag is used to insert an image into a webpage?

27. Which tag is used to create a hyperlink in HTML?

28. Which of the following is the correct syntax for an HTML element with an attribute?

29. Which tag contains the visible content of a webpage?

30. What must every HTML document begin with?

HTML & CSS Fundamentals Mastery Quiz

1. An element with position: static will ignore the top, right, bottom, and ______ properties.

2.

What first name or nickname would you like us to use?

2. Three nested divs: outer (position: relative) > middle (position: static) > inner (position: absolute). Relative to which div is inner positioned?

3. Two overlapping boxes in the same stacking context: #boxA { z-index: 1; } and #boxB { z-index: 2; }. Which box appears on top?

4. Given: .header { position: fixed; top: 0; width: 100%; } What happens as the user scrolls down the page?

5. The parent has position: relative. The child has: position: absolute; top: 0; right: 0; Where does the child appear?

6. Given: .box { position: absolute; top: 0; left: 0; } The parent of .box has no position set. Where does .box appear?

7. Given: .box { position: relative; top: 20px; left: 10px; } What happens to .box, and do surrounding elements fill its original spot?

8. Which CSS centers a 200px by 200px .box exactly in the middle of a relatively positioned parent?

9. What CSS declaration must be added to .container so that any child with position: absolute is positioned relative to .container?

10. Which CSS nudges a .badge 5px down and 5px to the right from its default spot without shifting surrounding elements?

11. Which CSS pins a .chat-button to the bottom-right corner of the screen (20px from each edge) so it never moves when scrolling?

12. Which CSS makes a .navbar stick to the top of the viewport as the user scrolls down the page?

13. Which CSS rule positions a .card 10px from the top and 15px from the right using absolute positioning?

14. The CSS property used to control which positioned element visually sits on top of another is ______.

15. If you set position: absolute on an element and none of its ancestors are positioned, it will be placed relative to the ______.

16. Which tag is used to define the root of an HTML document?

17. Position: sticky behaves like ______ positioning until a scroll threshold is crossed, then it behaves like ______ positioning.

18. Position: fixed positions an element relative to the ______ (it stays put even when the page is scrolled).

19. An element with position: absolute is positioned relative to its nearest ancestor that has a position value other than ______.

20. To move an element relative to its normal position while keeping its original space in the page flow, you use position: ______.

21. The default value of the CSS `position` property is ______.

22. Which HTML tag defines a row in a table?

23. Which of the following correctly defines an unordered list with one item?

24. Which tag specifies the title shown on the browser tab?

25. How do you write a comment in HTML?

26. Which tag is used to insert an image into a webpage?

27. Which tag is used to create a hyperlink in HTML?

28. Which of the following is the correct syntax for an HTML element with an attribute?

29. Which tag contains the visible content of a webpage?

30. What must every HTML document begin with?

17. Position: sticky behaves like positioning until a scroll threshold is crossed, then it behaves like positioning.