Exploring the CSS Cascade

This exercise consists of a series of CSS cascade and inheritance puzzles.

Tasks

Task 1

Open task_1.html

• Don't edit the <style> element!
• Edit the HTML so that the inner box is square and has a hotpink background color with a dashed lightblue border

Task 2

Open task_2.html

• Don't edit the <style> element!
• Edit the HTML so that the box has a hotpink background color

Task 3

Open task_3.html

Answer the following questions directly here in the README:

• Why is the <span> element text bold?
• Why is the <h2> and <p> element text red?
• Why is the <span> element text not red?
• Why don't <h2>, <p> and <span> each have a border?
• If you uncomment line 17, why does the <span> stay blue?
• If you uncomment line 18, why does the <span> turn green?

Task 4

Open task_4.html

• Don't edit the HTML file at all!
• Create and edit task_4.css so that each time the word Cucumbers appears on the page, it has the font color greenyellow
• All other words must have the font color palegoldenrod

Task 5

Open task5.html

This one is nearly identical to task 4! The instructions are the same, but there is something different this time... 🤫

• Don't edit the HTML file at all!
• Create and edit task_5.css so that each time the word Cucumbers appears on the page it has the font color greenyellow
• All other words must have the font color palegoldenrod

Hint: Compare the HTML with task_4.html to see what has changed!