**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Introduction to CSS and Styling Basics **Topic:** CSS syntax, selectors, and specificity Welcome to this topic on CSS syntax, selectors, and specificity. Understanding these fundamental concepts is crucial for writing efficient and effective CSS code. In this topic, we will dive into the world of CSS syntax, explore the different types of selectors, and learn how to calculate specificity. ### CSS Syntax CSS syntax is made up of three main parts: the selector, the property, and the value. * **Selector:** The selector is used to target the HTML element(s) that you want to apply styles to. It comes before the opening curly bracket `{`. * **Property:** The property is the CSS attribute that you want to apply to the selected element. It comes after the opening curly bracket `{`. * **Value:** The value is the value that you assign to the property. It comes after the colon `:`. Here's an example of a basic CSS syntax: ```css selector { property: value; } ``` For example: ```css h1 { color: blue; } ``` In this example, `h1` is the selector, `color` is the property, and `blue` is the value. ### CSS Selectors CSS selectors are used to target specific HTML elements and apply styles to them. There are several types of selectors, including: * **Element selectors:** These selectors target specific HTML elements, such as `h1`, `p`, `img`, etc. * **Class selectors:** These selectors target HTML elements that have a specific class attribute, denoted by a dot `.`. * **ID selectors:** These selectors target HTML elements that have a specific ID attribute, denoted by a hash `#`. * **Attribute selectors:** These selectors target HTML elements that have a specific attribute, such as `[href]`, `[target]`, etc. * **Pseudo-class selectors:** These selectors target HTML elements that have a specific state, such as `:hover`, `:active`, `:focus`, etc. * **Pseudo-element selectors:** These selectors target specific parts of an HTML element, such as `::before`, `::after`, `::first-letter`, etc. * **Combinators:** These selectors target HTML elements that have a specific relationship with another element, such as `>`, `+`, `~`, etc. Here are some examples of CSS selectors: ```css /* Element selector */ h1 { color: blue; } /* Class selector */ .blue { color: blue; } /* ID selector */ #header { color: blue; } /* Attribute selector */ [href] { color: blue; } /* Pseudo-class selector */ a:hover { color: blue; } /* Pseudo-element selector */ p::first-letter { color: blue; } /* Combinator selector */ div > p { color: blue; } ``` ### CSS Specificity CSS specificity is the process of determining which CSS rule should be applied to an HTML element when multiple rules apply to the same element. The most specific selector wins. Here are the rules for calculating specificity: * **Inline styles:** 1000 points * **ID selectors:** 100 points * **Class selectors, attribute selectors, and pseudo-class selectors:** 10 points * **Element selectors:** 1 point * **Combinators:** 0 points To calculate specificity, you can use the following formula: * Count the number of ID selectors in the chain (`#`): 100 points for each ID selector * Count the number of class selectors, attribute selectors, and pseudo-class selectors in the chain (`.`, `[`, `:`): 10 points for each selector * Count the number of element selectors in the chain (tags): 1 point for each selector * Add the scores: the highest score wins For example: ```css h1#header .blue { color: blue; } ``` In this example, the specificity would be: * `h1`: 1 point (element selector) * `#header`: 100 points (ID selector) * `.blue`: 10 points (class selector) The total specificity would be: 1 + 100 + 10 = 111 points ### Exercises and Examples Here are some exercises and examples to help you practice CSS syntax, selectors, and specificity: 1. Write a basic CSS syntax to target the `h1` element and change its color to blue. ```css h1 { color: blue; } ``` 2. Write a CSS rule to target all HTML elements with the class `button` and change their background color to red. ```css .button { background-color: red; } ``` 3. Write a CSS rule to target all HTML elements with the ID `header` and change their text color to blue. ```css #header { color: blue; } ``` 4. Write a CSS rule to target all HTML elements with the attribute `[href]` and change their text color to green. ```css [href] { color: green; } ``` 5. Write a CSS rule to target all HTML elements with the pseudo-class `:hover` and change their background color to yellow. ```css :hover { background-color: yellow; } ``` ### Conclusion and Next Steps In this topic, we learned about CSS syntax, selectors, and specificity. We explored the different types of selectors and learned how to calculate specificity. To practice what you have learned, try the exercises and examples provided above. You can also experiment with different CSS selectors and specificity calculations to become more proficient. In the next topic, we will cover **Applying basic styles: colors, fonts, backgrounds, and borders**. If you have any questions or need help, feel free to leave a comment below. Additional Resources: * [MDN Web Docs: CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) * [W3Schools: CSS Selectors](https://www.w3schools.com/css/css_selectors.asp) * [CSS-Tricks: CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/)