Reorder basic CSS test your skills for consistency

[chrisdavidmills]

Description

I got some feedback that the ordering of the "Test your skills" articles has become confusing since the last update. Specifically, in some of the tests, the "solution" live sample appears before the "starting state" live sample, so it is unclear which one to click on to start the test.

To remedy this, I have decided to go through all the "Test your skills" articles and make the structure as consistent as possible throughout, fixing the above issue in the process.

This PR in particular updates the structure of the CSS styling basics "Test your skills" articles.

Note: Not all of the tests show the finished state of the example. I have elected not to show it in cases where the before and after rendering look no different, where the final rendering gives away the answer, and where the question is freeform so there is no single answer.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (8 pages)

• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Backgrounds_and_borders
• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Box_model
• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Cascade
• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Images
• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Overflow
• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Selectors
• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Sizing
• /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Values

Flaws (4)

Note! 4 documents with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Backgrounds_and_borders
Title: Test your skills: Backgrounds and borders
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

---

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Box_model
Title: Test your skills: The box model
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

---

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Cascade
Title: Test your skills: The Cascade
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

---

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Sizing
Title: Test your skills: Sizing
Flaw count: 1

• macros:
  • Macro ? produces link /en-US/curriculum/ which doesn't resolve

External URLs (1)

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Values
Title: Test your skills: Values and units

• https://convertingcolors.com/hex-color-86DEFA.html (2 times) (Note! This may be a new URL 👀)

(comment last updated: 2026-01-30 15:58:28)

[chrisdavidmills]

Converting to draft until I've looked through the review at #42953.