CSS Syntax: Examples of Selectors, Properties, and Values in Action

📚 Quick Study Guide: CSS Syntax Essentials

• 🎯 CSS Rule Structure: A CSS rule consists of a selector and a declaration block.
• 🏷️ Selector: Points to the HTML element(s) you want to style. Common types include element, class, ID, and universal selectors.
• 📝 Declaration Block: Contains one or more declarations, enclosed in curly braces `{}`.
• 🔑 Declaration: A property-value pair. Each declaration ends with a semicolon `;`.
• 🎨 Property: The style attribute you want to change (e.g., `color`, `font-size`, `background-color`).
• 💡 Value: The specific setting for the property (e.g., `blue`, `16px`, `#f0f0f0`).
• 👀 Example: `p { color: blue; font-size: 16px; }` Here, `p` is the selector, `color` and `font-size` are properties, and `blue` and `16px` are values.
• 📍 Class Selector: Targets elements with a specific `class` attribute, preceded by a dot (`.`). Example: `.my-class { ... }`.
• 🆔 ID Selector: Targets a single unique element with a specific `id` attribute, preceded by a hash (`#`). Example: `#my-id { ... }`.
• 🌟 Universal Selector: Selects all HTML elements, represented by an asterisk (`*`). Example: `* { ... }`.

🧠 Practice Quiz: Test Your CSS Knowledge

1. Which of the following is the correct CSS syntax for making all `p` elements red?

1. p {color: red;}
2. p [color: red;]
3. {p; color: red;}
4. p: color=red;

2. In the CSS rule `h1 { font-size: 24px; }`, what does `h1` represent?

1. A property
2. A value
3. A selector
4. A declaration

3. How do you select an element with the `id="header"`?

1. .header
2. element#header
3. #header
4. header

4. What is the correct way to apply a class named `highlight` to an element?

1. highlight { background-color: yellow; }
2. .highlight { background-color: yellow; }
3. #highlight { background-color: yellow; }
4. *highlight { background-color: yellow; }

5. Which part of the CSS declaration `color: blue;` is the property?

1. `;`
2. `color`
3. `blue`
4. `color: blue`

6. What does the universal selector `*` target in CSS?

1. Only elements with a class
2. Only elements with an ID
3. All HTML elements
4. Only the body element

7. If you want to set the text alignment of an element to center, which property-value pair would you use?

1. `align-text: center;`
2. `text-align: middle;`
3. `text-align: center;`
4. `align: center;`