BananaMaster

5 How Nesting Works in HTML and What Are width, height and background (HTML and CSS, Front End)

If you forgot something, click to go to the lesson

📘 Practical Tasks: Nested div Blocks

For each task create separate classes in style.css and apply them to the correct tags.

📌 File structure: index.html + style.css

✏️ Task 1

Recreate this block:

• Width: 200px
• Height: 200px
• Background: #3498db

✏️ Task 2

Recreate these two blocks:

• Estimate the sizes by eye
• Block 1 — background: #e74c3c
• Block 2 — background: #2ecc71

✏️ Task 3

Recreate the nested blocks:

• Estimate the sizes by eye
• Outer — background: #f39c12
• Inner — background: #8e44ad

✏️ Task 4

Recreate three nested blocks:

• Estimate the sizes by eye
• Block 1 (outer) — background: #1abc9c
• Block 2 (middle) — background: #e67e22
• Block 3 (inner) — background: #c0392b

✏️ Task 5

Recreate a block with two child blocks inside:

• Estimate the sizes by eye
• Parent — background: #2c3e50
• Child 1 — background: #f1c40f
• Child 2 — background: #e91e63

✏️ Task 6

Recreate blocks of different heights in a column:

• Estimate the sizes by eye
• Block 1 — background: #9b59b6
• Block 2 — background: #27ae60
• Block 3 — background: #e74c3c

✏️ Task 7

Recreate four levels of nesting:

• Estimate the sizes by eye
• Block 1 — background: #ecf0f1
• Block 2 — background: #bdc3c7
• Block 3 — background: #95a5a6
• Block 4 — background: #7f8c8d

✏️ Task 8

Recreate a block with two columns inside:

• Estimate the sizes by eye — all three columns must fit inside the parent
• Parent — background: #34495e
• Column 1 — background: #e74c3c
• Column 2 — background: #f39c12
• Column 3 — background: #2ecc71

✏️ Task 9

Recreate a block with percentage width:

• Estimate the sizes by eye
• Parent — background: #16a085
• Child — background: #d35400

✏️ Task 10 — 🔥 Bonus

Create your own! Make at least 3 nested blocks with the classes .box-outer, .box-middle, .box-inner.

• Estimate the sizes by eye
• Block 1 (outer) — background: #6c5ce7
• Block 2 (middle) — background: #00cec9
• Block 3 (inner) — background: #fd79a8

📌 Important:
Each class is written separately in style.css.
Use HTML and CSS only.
Practice the properties: width, height, background.