From e0b0a44cc241595c4d0a21267bc972f00343fd0c Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 20 May 2025 00:26:39 +0200 Subject: [PATCH] feat: update task description to include HTML tags for paragraph and color properties; add solution code for CSS rule --- lessons/00-basic-selectors.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lessons/00-basic-selectors.json b/lessons/00-basic-selectors.json index 76075d4..08aa61a 100644 --- a/lessons/00-basic-selectors.json +++ b/lessons/00-basic-selectors.json @@ -9,7 +9,7 @@ "id": "introduction-to-selectors", "title": "What is a CSS Selector?", "description": "A CSS selector is the first part of a CSS rule that tells the browser which HTML elements should receive the styles defined in the declaration block. Selectors are essentially patterns that match against elements in your HTML document. Understanding selectors is fundamental because they determine which elements your CSS rules will affect. The element or elements targeted by a selector are referred to as the 'subject of the selector.' When writing a CSS rule, you first specify the selector, followed by curly braces that contain the style declarations.
For example, to change the text color of elements, you can use the color property within your declaration block.

/* Element selector */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}
", - "task": "Write a CSS rule using a type selector that targets all paragraph elements (p) in the document. Make the text blue by setting the color property to blue.", + "task": "Write a CSS rule using a type selector that targets all paragraph elements p in the document. Make the text blue by setting the color property to blue.", "previewHTML": "

Introduction to CSS Selectors

\n

This paragraph should turn blue.

\n
This div element should remain unchanged.
\n

This second paragraph should also turn blue.

", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }", @@ -17,6 +17,7 @@ "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", + "solution": "p { color: blue }", "validations": [ { "type": "regex",