Bird
Raised Fist0
CSSmarkup~30 mins

Display property in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Understanding the CSS Display Property
📖 Scenario: You are creating a simple webpage layout with three colored boxes. You want to control how these boxes appear next to each other or stacked using CSS.
🎯 Goal: Build a webpage with three colored boxes and use the CSS display property to change their layout from block to inline and inline-block.
📋 What You'll Learn
Create three <div> elements with classes box1, box2, and box3.
Set each box to have a width of 100px, height of 100px, and distinct background colors.
Use the CSS display property to first show boxes stacked vertically (block).
Then change the display property to inline to show boxes side by side without space.
Finally, use inline-block to show boxes side by side with space and allow width and height to apply.
💡 Why This Matters
🌍 Real World
Web developers often need to control how elements appear on a page. The display property is a basic but powerful tool to arrange content visually.
💼 Career
Understanding CSS display is essential for front-end developers to build layouts that look good and work well on different devices.
Progress0 / 4 steps
1
Create the HTML structure with three boxes
Write the HTML code to create three <div> elements with classes box1, box2, and box3 inside the <body> tag.
CSS
Hint

Use three <div> tags with the exact class names box1, box2, and box3.

2
Add CSS for box size and colors with display block
In the CSS file, create styles for .box1, .box2, and .box3 to have width 100px, height 100px, and background colors red, green, and blue respectively. Also, set the display property of all boxes to block.
CSS
Hint

Use the CSS display: block; property for each box to stack them vertically.

3
Change the display property to inline
Modify the CSS so that the display property of .box1, .box2, and .box3 is set to inline instead of block.
CSS
Hint

Set display: inline; for each box to place them side by side without respecting width and height fully.

4
Change the display property to inline-block
Finally, update the CSS so that the display property of .box1, .box2, and .box3 is set to inline-block. This will show the boxes side by side and respect their width and height.
CSS
Hint

Use display: inline-block; to keep boxes side by side and keep their size.

Practice

(1/5)
1. What does the CSS display: none; property do to an element on a webpage?
easy
A. It hides the element and removes it from the page layout.
B. It makes the element visible but transparent.
C. It changes the element to a block-level element.
D. It makes the element inline without line breaks.

Solution

  1. Step 1: Understand the effect of display: none;

    This property hides the element completely and removes it from the page layout, so it takes no space.

  2. Step 2: Compare with other display values

    Unlike visibility: hidden; which hides but keeps space, display: none; removes the element entirely.

  3. Final Answer:

    It hides the element and removes it from the page layout. -> Option A

  4. Quick Check:

    display: none; = hidden and no space [OK]
Hint: None means hidden and no space taken [OK]
Common Mistakes:
  • Confusing with visibility: hidden
  • Thinking it only makes element invisible but keeps space
  • Mixing with display: inline or block
2. Which of the following is the correct CSS syntax to make an element a flex container?
easy
A. display-flex: true;
B. display = flex;
C. display: flex;
D. flex-display: block;

Solution

  1. Step 1: Recall correct CSS property syntax

    CSS properties use a colon : to assign values, not equals =.

  2. Step 2: Identify the correct property and value

    The property is display and the value to create a flex container is flex.

  3. Final Answer:

    display: flex; -> Option C

  4. Quick Check:

    Correct CSS syntax uses colon and display: flex; [OK]
Hint: Use colon, not equals, for CSS properties [OK]
Common Mistakes:
  • Using equals sign instead of colon
  • Incorrect property names like display-flex
  • Adding extra words like true
3. Given this HTML and CSS, what will be the visible layout of the items?
<div class='container'>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

.container {
  display: flex;
  flex-direction: column;
}
medium
A. The items A, B, C appear as inline text separated by spaces.
B. The items A, B, C appear side by side horizontally.
C. The items A, B, C are hidden and not visible.
D. The items A, B, C appear stacked vertically in a column.

Solution

  1. Step 1: Understand display: flex; with flex-direction: column;

    Flex container arranges children in a flexible box. The column direction stacks items vertically.

  2. Step 2: Predict the layout of the spans

    Each <span> will appear one below the other in a vertical column.

  3. Final Answer:

    The items A, B, C appear stacked vertically in a column. -> Option D

  4. Quick Check:

    flex-direction: column; stacks vertically [OK]
Hint: Flex column stacks items vertically [OK]
Common Mistakes:
  • Assuming flex always arranges horizontally
  • Confusing inline elements with flex behavior
  • Ignoring flex-direction property
4. You want to hide a paragraph but keep its space on the page. Which CSS property and value should you use? The following code does not work as expected:
p {
  display: none;
}

What is the correct fix?
medium
A. Use display: inline; to hide the paragraph
B. Change display: none; to visibility: hidden;
C. Add opacity: 0; instead of display
D. Change display: none; to display: block;

Solution

  1. Step 1: Understand difference between display: none; and visibility: hidden;

    display: none; removes element and space, visibility: hidden; hides element but keeps space.

  2. Step 2: Apply the correct property to keep space

    Use visibility: hidden; to hide content but preserve layout space.

  3. Final Answer:

    Change display: none; to visibility: hidden; -> Option B

  4. Quick Check:

    Keep space by using visibility: hidden; [OK]
Hint: Use visibility hidden to keep space but hide [OK]
Common Mistakes:
  • Using display none and expecting space to remain
  • Using opacity 0 but element still clickable
  • Confusing display inline with hiding
5. You have a navigation bar with list items. You want the list items to appear horizontally with equal spacing and be centered. Which CSS display property and layout method should you use?
hard
A. Use display: flex; on the container with justify-content: space-around;.
B. Use display: block; on list items and text-align: center; on the container.
C. Use display: inline; on the container and margin: auto; on list items.
D. Use display: grid; on list items with grid-template-columns: repeat(3, 1fr);.

Solution

  1. Step 1: Identify the container and desired layout

    The container holds list items that should be horizontal, spaced equally, and centered.

  2. Step 2: Choose display and alignment properties

    display: flex; on container creates a flexible row layout. justify-content: space-around; spaces items evenly with space around them.

  3. Final Answer:

    Use display: flex; on the container with justify-content: space-around;. -> Option A

  4. Quick Check:

    Flex + justify-content space-around = horizontal equal spacing [OK]
Hint: Flex container with justify-content spaces items evenly [OK]
Common Mistakes:
  • Applying display properties to wrong elements
  • Using block display which stacks vertically
  • Confusing inline display with container layout