CSSmarkup~30 mins

Display property in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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




    
    
    Display Property Example

Need a hint?

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

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

/* Add CSS for .box1, .box2, .box3 with width, height, background-color, and display:block */
/* Your code here */

Need a hint?

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

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

/* Change display property of .box1, .box2, .box3 to inline */
/* Your code here */

Need a hint?

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

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

/* Change display property of .box1, .box2, .box3 to inline-block */
/* Your code here */

Need a hint?

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