Container queries are a new feature in CSS that allow us to change the style of an element based on the size of its containing or parent element. This is different from media queries, which are used to check the size of the entire web page. To use container queries, we specify which element will be the "container" by using a property called "container." This tells the browser which element we want to watch for size changes. The "container" can be one of the following types: width, height, inline size, or block size.
CSS nesting is a feature that makes it easier to organize and write your CSS code. It allows you to put one set of styling rules (like the way things look on a web page) inside another set of rules, making it clear which styles apply to which elements. What's special about CSS nesting is that it's part of regular CSS and doesn't require any special tools or pre-processing like some other systems (like Sass). The web browser understands and reads this nesting directly. The benefits of using CSS nesting are that it makes your code easier to read, allows you to organize your styles more neatly, and helps you keep your CSS files smaller. When your CSS is smaller, it means that your website can load faster for users because there's less data to download. In simple terms, CSS nesting is a way to structure your CSS code so it's more organized and efficient, which is good for both developers and the people who visit your website.