This paragraph should turn blue.
\nThis 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; }", "codePrefix": "/* Write a type selector to target all paragraph elements */\n", "initialCode": "", - "codeSuffix": " {\n color: blue;\n}", + "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", - "value": "^\\s*p\\s*$", - "message": "Use the 'p' selector to target all paragraph elements", + "value": "p", + "message": "Create a rule that targets all paragraph elements with 'p'", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": "p\\s*{[^}]*color:[^}]*}", + "message": "Create a rule that targets all paragraph elements with 'p' and sets their color", + "options": { + "caseSensitive": false + } + }, + { + "type": "regex", + "value": "p\\s*{[^}]*color:\\s*blue;?[^}]*}", + "message": "Create a rule that targets all paragraph elements with 'p' and sets their color to blue", "options": { "caseSensitive": false } @@ -32,18 +48,18 @@ "id": "type-selectors", "title": "Type Selectors: Targeting HTML Elements", "description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, 'p' selects all paragraph elements, 'h1' selects all level-one headings, and 'div' selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. They provide a broad brush for styling your page and are often the starting point for more specific styling using other selector types.", - "task": "Write type selectors to target specific HTML elements. Create three separate rules: one for h2 headings (making them purple), one for span elements (giving them a yellow background), and one for strong elements (making them red). This exercise demonstrates how type selectors can target different elements independently.", + "task": "Write three separate CSS rules using type selectors to target specific HTML elements: make h2 headings purple, give span elements a yellow background, and make strong elements red.", "previewHTML": "Regular paragraph text with a highlighted span that should have a yellow background.
\nAnother paragraph with strong important text that should be red.
\nThis is a regular paragraph, but this span has the highlight class applied to it.
\nThis entire paragraph has the highlight class.
\nThis paragraph has a highlighted span that should have an orange background.
\nThis paragraph has the highlight class but should NOT have an orange background.
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }", "sandboxCSS": "h2, p, span { padding: 5px; }", "codePrefix": "/* The .highlight class already sets font-weight to bold */\n/* Now target ONLY span elements with the highlight class */\n", "initialCode": "", - "codeSuffix": " {\n background-color: orange;\n}", + "codeSuffix": "", "previewContainer": "preview-area", "validations": [ + { + "type": "contains", + "value": "span.highlight", + "message": "Use the 'span.highlight' selector (no space between them)" + }, { "type": "regex", - "value": "^span\\.highlight$", - "message": "Use 'span.highlight' to target span elements with the highlight class", + "value": "span\\.highlight\\s*{[^}]*background(-color)?:\\s*orange;?[^}]*}", + "message": "Use 'span.highlight' selector and set background-color: orange", "options": { "caseSensitive": true } @@ -140,19 +190,27 @@ "id": "id-selectors", "title": "ID Selectors: Targeting Unique Elements", "description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.", - "task": "Create an ID selector that targets the element with the ID 'main-title'. Set its color to purple and add an underline. Remember that ID selectors begin with a hash/pound (#) symbol and should be used only for truly unique elements on your page.", + "task": "Create a CSS rule with an ID selector that targets the element with the ID 'main-title'. Set its color to purple and add an underline with text-decoration: underline.", "previewHTML": "Regular paragraph content.
\nIntroduction paragraph (different ID).
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }", "codePrefix": "/* Create an ID selector to target the element with id=\"main-title\" */\n", "initialCode": "", - "codeSuffix": " {\n color: purple;\n text-decoration: underline;\n}", + "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", - "value": "^#main-title$", - "message": "Use '#main-title' to select the element with id=\"main-title\"", + "value": "#main-title\\s*{[^}]*color:\\s*purple;[^}]*}", + "message": "Use '#main-title' selector and set color: purple", + "options": { + "caseSensitive": true + } + }, + { + "type": "regex", + "value": "#main-title\\s*{[^}]*text-decoration:\\s*underline;[^}]*}", + "message": "Add text-decoration: underline to your #main-title rule", "options": { "caseSensitive": true } @@ -163,19 +221,19 @@ "id": "id-with-type", "title": "Combining Type and ID Selectors", "description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, 'h1#title' targets an h1 element with the ID 'title'. While this approach is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.", - "task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID 'special'. Set its font style to italic. While the ID alone would be sufficient to target the element, this combined approach can sometimes improve code readability.", + "task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID 'special'. Set its font style to italic.", "previewHTML": "Paragraph with ID \"special\" (should become italic)
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }", "codePrefix": "/* Create a combined type+ID selector for a paragraph with id=\"special\" */\n", "initialCode": "", - "codeSuffix": " {\n font-style: italic;\n}", + "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", - "value": "^p#special$", - "message": "Use 'p#special' to select paragraph elements with id=\"special\"", + "value": "p#special\\s*{[^}]*font-style:\\s*italic;[^}]*}", + "message": "Use 'p#special' selector and set font-style: italic", "options": { "caseSensitive": true } @@ -186,13 +244,13 @@ "id": "selector-lists", "title": "Selector Lists: Applying the Same Rules to Multiple Selectors", "description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, 'h1, h2, h3 { color: blue; }' applies the same blue color to all three heading levels. Whitespace around commas is optional, and each selector in the list can be any valid selector type—elements, classes, IDs, or even more complex selectors.", - "task": "Create a selector list that applies the same styles to three different elements: paragraphs with class 'note', list items with class 'important', and the element with ID 'summary'. This demonstrates how selector lists can group different selector types (element+class and ID selectors) for efficiency.", + "task": "Create a selector list that applies the same styles to three different elements: paragraphs with class 'note', list items with class 'important', and the element with ID 'summary'. Give them a light yellow background, a gold left border, and some left padding.", "previewHTML": "This is a note paragraph.
\nThis paragraph is inside the container.
\nThis paragraph is outside the container and should not be affected.
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid #333; padding: 15px; background-color: #f5f5f5; } h2, p, ul, li { margin: 15px 0; }", "sandboxCSS": "", "codePrefix": "/* Use the universal selector to target all elements inside the container */\n", "initialCode": "", - "codeSuffix": " {\n margin: 0;\n}", + "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", - "value": "^div\\.container\\s+\\*$", - "message": "Use 'div.container *' to select all elements inside the container div", + "value": "div\\.container\\s+\\*\\s*{[^}]*margin:\\s*0;[^}]*}", + "message": "Use 'div.container *' selector and set margin: 0", "options": { "caseSensitive": true } @@ -256,19 +330,19 @@ "id": "specificity-basics", "title": "Understanding Selector Specificity", "description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.", - "task": "Examine the existing CSS rules and determine which text color will be applied to the paragraph based on specificity. Add a new rule using '.content p' as the selector and 'green' as the color to demonstrate how combining selectors increases specificity compared to a simple element selector.", + "task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.", "previewHTML": "What color will this paragraph be? Look at the CSS rules and their specificity.
\n