HTML & CSS Assessment Quiz by Stephen

Question 1: Concept Understanding

Which CSS property determines how elements behave when they don't fit in their container?

overflow display position float

Question 2: Concept Understanding

What is the correct definition of CSS specificity?

How quickly a browser can render CSS properties How the browser decides which CSS rule to apply when multiple rules target the same element The order in which CSS rules appear in a stylesheet How specific a CSS selector needs to be to work across browsers

Question 3: Concept Understanding

In the CSS box model, which of the following is applied FIRST to the element's content?

Margin Border Padding Position

Question 4: Concept Understanding

Which HTML5 semantic element would be MOST appropriate for the main content area of a webpage?

Question 5: Concept Understanding

In a CSS flexbox layout, what does `flex: 1 0 auto` mean?

Grow: 1, Shrink: 0, Basis: auto Grow: auto, Shrink: 0, Basis: 1 Direction: horizontal, Alignment: center, Wrap: no Width: 1%, Height: 0, Position: auto

Question 6: Concept Understanding

What is the primary purpose of CSS Grid's `grid-template-areas` property?

To name grid lines for easier reference To create a visual ASCII-like layout that maps grid cell positions To define the number of rows and columns in a grid To assign specific widths to different grid columns

Question 7: Code Analysis

What's wrong with this CSS code?

.container {
  display: flex;
  flex-direction: horizontal;
  align-items: center;
}

`.container` is not a valid selector `flex-direction: horizontal` is incorrect (should be "row") You can't use `align-items` with flexbox Display flex and flex-direction cannot be used together

Question 8: Code Analysis

What issue exists in this HTML code?

<article>
  <h2>Article Title</h2>
  <p>First paragraph</p>
  <h1>Section Heading</h1>
  <p>Second paragraph</p>
</article>

<article> cannot contain <h2> elements Heading hierarchy is incorrect (<h1> should come before <h2>) <article> must have an id attribute You can't have multiple paragraph elements in an article

Question 9: Code Analysis

What would be the computed value of `width` for this element?

.box {
  width: 100px;
  min-width: 150px;
  max-width: 200px;
}

100px 150px 200px It depends on the parent element's width

Question 10: Code Analysis

What's problematic about this CSS media query?

@media screen and (max-width: 600px) and (min-width: 800px) {
  .container {
    width: 90%;
  }
}

Media queries cannot target screen devices The syntax for combining queries is incorrect The logical condition can never be true (width cannot be both ≤600px and ≥800px) Percentage values are not allowed in media query declarations

Question 11: Code Analysis

What problem exists in this CSS?

.responsive-image {
  max-width: 100%;
  max-height: auto;
  display: block;
}

`max-height: auto` is invalid (auto is not a valid value for max-height) Responsive images should use width, not max-width Display block prevents responsive behavior Images need height: auto, not max-height

Question 12: Predict Output

How would these elements be arranged in the browser?

<div style="display: flex; flex-direction: column-reverse; height: 300px;">
  <div style="height: 100px; background: red;">A</div>
  <div style="height: 100px; background: blue;">B</div>
  <div style="height: 100px; background: green;">C</div>
</div>

Red at top, blue in middle, green at bottom Green at top, blue in middle, red at bottom All three side by side in reverse order (C, B, A) All three stacked with no particular order

Question 13: Predict Output

What will be displayed for an element with this CSS applied?

.element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(50%, 50%) rotate(45deg);
}

A blue square in the top-left corner of its container A blue square in the middle of its container A blue diamond (rotated square) moved 50px right and 50px down from top-left A blue diamond (rotated square) moved to the center-right of its container

Question 14: Predict Output

What would this CSS produce on the webpage?

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
  height: 200px;
}

Three equal-width columns with 10px spacing Three rows with the middle row twice as tall as the others Three columns where the middle column is twice as wide as the others A single row with three columns of varying widths based on content

Question 15: Predict Output

What will be the result of this HTML and CSS?

<div class="parent">
  <div class="child">Content</div>
</div>

.parent {
  position: relative;
  height: 200px;
  background: yellow;
}
.child {
  position: absolute;
  bottom: 0;
  right: 0;
  background: red;
  padding: 10px;
}

A red box with "Content" positioned at the top-left of a yellow rectangle A red box with "Content" positioned at the bottom-right of a yellow rectangle A red box with "Content" centered in a yellow rectangle A red box with "Content" that takes up the full width at the bottom of a yellow rectangle

Question 16: Predict Output

What will this CSS selector match?

article > p:first-of-type

The first paragraph anywhere inside an article Only the first paragraph that is a direct child of an article Any paragraph that is the first child of an article Every paragraph that's inside an article element

Question 17: Predict Output

How would this layout behave on a narrow mobile screen?

.container {
  display: flex;
  flex-wrap: nowrap;
}
.box {
  flex: 0 0 200px;
}

The boxes would shrink to fit the screen width The boxes would wrap to a new line The boxes would maintain 200px width and create horizontal scrolling The boxes would become vertically stacked

Question 18: Predict Output

What would happen with this CSS if applied to a paragraph containing the text "This is important!"?

p::first-letter {
  font-size: 2em;
  float: left;
  padding: 4px;
  background-color: red;
}

The entire text would be red with large font The word "This" would be larger and red The letter "T" would be larger, red, and padded with text wrapping around it "This is" would be emphasized and have a red background

Question 19: Predict Output

What would this HTML and CSS render as?

<ul class="nav">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

.nav {
  display: flex;
  list-style: none;
  padding: 0;
}
.nav li {
  margin-right: 10px;
}
li:hover {
  text-decoration: underline;
  cursor: pointer;
}

A vertical list with bullets and underlines on hover A horizontal navigation menu with items underlined on hover A horizontal menu with bullet points and pointer cursor A flexible container with stacked list items

HTML & CSS Assessment Quiz

Student Information