/* Element selector */\np {\n color: orangered;\n /* │ └─── Indicates the value of the expression\n │ \n └─────────── Indicates the property of the expression */\n}",
"task": "Complete the CSS rule by providing a valid selector that targets all paragraph elements (p). This selector should apply to every paragraph on the page. Notice how the declaration block is already structured with the property-value pair 'color: blue;'.",
"previewHTML": "This paragraph should be blue.
This paragraph should also be blue.
This is a paragraph that should remain unchanged.
This text should be red with yellow background.
This text remains unchanged.
This span should also be red with yellow background.", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }", "sandboxCSS": ".important-text, p { padding: 5px; margin-bottom: 10px; display: block; }", "codePrefix": "/* Write a class selector to target elements with the class 'important-text' */\n", "initialCode": "", "codeSuffix": " {\n color: red;\n background-color: yellow;\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": ".important-text", "message": "Use the .important-text class selector", "options": { "caseSensitive": true } } ] }, { "id": "css-selectors-id", "title": "ID Selectors", "description": "ID selectors target a single, unique HTML element that has a specific id attribute value. They begin with a hash symbol (#) followed by the ID name. Unlike classes, an ID should be unique within a page—it should only be used once. ID selectors have higher specificity than class selectors, which means they override class and element selectors when specificity conflicts arise. Because of their uniqueness constraint, IDs are ideal for styling one-of-a-kind elements.", "task": "Write an ID selector to target the element with the ID 'header-title'. Set its font-weight to 'bold'. Begin with a hash symbol (#) followed by the ID name.", "previewHTML": "Try hovering over the button to see the effect.
", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } button { padding: 10px 20px; background-color: blue; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; }", "sandboxCSS": "", "codePrefix": "/* Add the :hover pseudo-class to create an interactive effect */\nbutton", "initialCode": "", "codeSuffix": " {\n background-color: green;\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": ":hover", "message": "Add the :hover pseudo-class after the button selector", "options": { "caseSensitive": true } } ] }, { "id": "css-box-model-padding", "title": "Padding", "description": "The CSS box model represents how elements are rendered in the browser. Every element is effectively a box with content at its core, surrounded by padding, border, and margin areas. Padding creates space between an element's content and its border, providing visual breathing room. You can control padding on all sides at once with the 'padding' property, or target specific sides with 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left'. Proper padding is essential for visual hierarchy and readability.", "task": "Add padding to the content-box element. Set the padding to '20px' to create adequate space between the content and the element's border. This will improve readability and visual appeal.", "previewHTML": "This paragraph needs proper padding around it to improve readability and aesthetic appeal.
Without padding, text would touch the edges of the box, making it harder to read.
This paragraph should have space above it, separating it from the heading.
", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .section-title { background-color: #f0f0f0; padding: 8px; }", "sandboxCSS": "h2, p { border: 1px dashed #ccc; padding: 10px; }", "codePrefix": "/* Add bottom margin to create vertical spacing */\n.section-title {\n /* Add your code below */", "initialCode": " ", "codeSuffix": "}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "margin-bottom", "message": "Use the margin-bottom property to add space after the title", "options": { "caseSensitive": false } }, { "type": "property_value", "value": { "property": "margin-bottom", "expected": "30px" }, "message": "Set the margin-bottom value to 30px", "options": { "exact": true } } ] }, { "id": "css-box-model-border", "title": "Borders", "description": "Borders define the perimeter of an element in the CSS box model, positioned between the padding and margin areas. The 'border' property is shorthand that combines border-width, border-style, and border-color properties. You can apply borders to all sides of an element or target specific sides with 'border-top', 'border-right', 'border-bottom', and 'border-left'. Borders serve both functional and aesthetic purposes: they visually separate elements, highlight interactive components, and can become integral parts of your design language.", "task": "Add a border to the card element. Set the border property to '2px solid blue' to create a defined boundary with a distinctive color. This will help the card stand out visually from surrounding content.", "previewHTML": "This card element needs a defined border to enhance its visibility.
This text needs a monospace font applied to it. Notice how each character takes up the same width in monospace fonts.
", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }", "sandboxCSS": ".styled-text { font-size: 18px; padding: 15px; background-color: #f5f5f5; border-radius: 4px; }", "codePrefix": "/* Set the font family using a monospace font stack */\n.styled-text {\n /* Add your code below */\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "font-family", "message": "Use the font-family property", "options": { "caseSensitive": false } }, { "type": "regex", "value": "font-family:\\s*Courier,\\s*monospace", "message": "Set the font-family to Courier, monospace", "options": { "caseSensitive": false } } ] }, { "id": "css-units-relative-absolute", "title": "Units", "description": "CSS offers various measurement units, categorized as either relative or absolute. Relative units (like %, em, rem, vh, vw) scale based on other factors and are essential for responsive design. For instance, 'rem' units scale relative to the root element's font size, while '%' units are proportional to parent element dimensions. Absolute units (like px, pt, cm, in) maintain fixed dimensions regardless of context. Modern web development favors relative units for their adaptability across different screen sizes and user preferences, especially for accessible design.", "task": "Set the width of the responsive element to '80%' of its parent container and its font-size to '18px'. Percentage width enables the element to adapt to different screen sizes, while pixel units provide precise control for font sizes.", "previewHTML": "Which color will this paragraph have?
", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } p { color: #ff0000; }", "sandboxCSS": "", "codePrefix": "/* p elements are set to red in the base CSS */\n/* Now add a more specific rule for paragraphs with class 'highlight' */\n.highlight {", "initialCode": "", "codeSuffix": "\n color: #0000ff;\n}", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^\\s*$", "message": "Just leave this blank - the class selector already has higher specificity than the element selector", "options": { "caseSensitive": false } } ] }, { "id": "css-layout-display-property", "title": "Display", "description": "The 'display' property defines how an element behaves in the document flow and in relation to other elements. Common values include 'block', 'inline', 'inline-block', 'flex', 'grid', and 'none'. Block elements start on a new line and take up the full width available, inline elements flow within the text and only take up as much width as necessary, and inline-block elements combine aspects of both. The display property is fundamental to controlling layout in CSS and serves as the foundation for more complex positioning techniques.", "task": "Change the display property of the span element to 'block' to make it behave like a block-level element rather than an inline element. This will make it start on a new line and take up the full width available.", "previewHTML": "This is a paragraph with a span that should become a block element.
", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; } .block-me { background-color: #ffeb3b; padding: 5px; }", "sandboxCSS": "", "codePrefix": "/* Change the display property to make the span a block element */\n.block-me {\n /* Add your code below */\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "validations": [ { "type": "contains", "value": "display", "message": "Use the display property", "options": { "caseSensitive": false } }, { "type": "property_value", "value": { "property": "display", "expected": "block" }, "message": "Set the display value to block", "options": { "exact": true } } ] }, { "id": "css-flexbox-basics", "title": "Flex Basics", "description": "Flexbox is a powerful layout model that makes it easier to design flexible responsive layouts. It consists of flex containers and flex items. The container is the parent element with 'display: flex' or 'display: inline-flex' set, while items are the direct children within. Flexbox provides properties for controlling direction, alignment, order, and proportions of items. With flexbox, complex layouts that would require tricky positioning and floats can be achieved with much cleaner and more maintainable code.", "task": "Create a basic flexbox container by adding 'display: flex' to the parent element. Then set flex-direction to 'row' to make the items display horizontally (this is the default behavior, but it's good to specify it explicitly).", "previewHTML": "