diff --git a/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md b/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md index 53d6153d70a..8833a827dff 100644 --- a/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md +++ b/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-is-the-basic-anatomy-of-a-css-rule --- -# --description-- +# --interactive-- CSS is responsible for the styles of a web page. All of these styles are made up of various CSS rules. @@ -33,7 +33,17 @@ The value would be the specific setting applied to that property. For example, i After each property name, you need to place a colon, and after each value, you should have a semicolon. -Now that you know the syntax for a CSS rule, let's take a look at an example. +Now that you know the syntax for a CSS rule, let's take a look at an example. Click on the `styles.css` tab in the interactive editor to see the CSS code. + +:::interactive_editor + +```html + +

Learning about CSS

+ +

Example paragraph element

+

Another example paragraph element

+``` ```css p { @@ -41,6 +51,8 @@ p { } ``` +::: + In this CSS rule, a type selector targets all paragraph elements on the page. Inside the declaration block, there is a one declaration. @@ -51,6 +63,16 @@ If you want to apply the same set of styles to multiple selectors, you can creat Here is an example of styling multiple selectors: +:::interactive_editor + +```html + + +

Example heading

+

Example subheading

+

This paragraph is not affected by the selector.

+``` + ```css #title, .subheading { @@ -58,6 +80,8 @@ Here is an example of styling multiple selectors: } ``` +::: + In this selector list, there is an `id` selector targeting the HTML element with the `id` value of `title`. All `id` selectors must start with a hash `#` symbol. Then there is a comma followed by a `class` selector that targets all HTML elements with the `class` value of `subheading`. All class selectors must start with a dot `.`