CSS Grouping

The CSS grouping selector is used to select multiple elements and style them together.
Using this method reduces the code and the duplication when  common styles are used for each element.

To group selectors, each selector is separated by a space.
It is important to note that different types of selectors can be grouped with each other.

Why Use CSS Grouping

CSS grouping can be used to condense code that has multiple selectors with the same declarations.

This makes code easy to read and maintain. Also development time is significantly reduced as there is less code to write. Page load times are reduced as well when using grouping.

Syntax of Css Grouping

element, element {
/*declarations*/
}

Given Below is an Example

Exercise 11.1

This webpage describes groupers, a type of large ocean fish.
In the first step, your job is to to make the first sentences of each paragraph stand out. Start by adding <span> tags around each first sentence.
Then give both of your <span> tags a class called “first-sentence”.