CSS Grouping and Nesting

In CSS it is possible to nest and group selectors together.

The easiest way to explain CSS grouping and nesting is by using examples.

Let’s say I want to have all my h tags (h1-h6) in a green font colour, rather than the rest which are all black. All I need to do is list the tags I want to use as selectors one after another, just before the declaration:
h1,h2,h3,h4,h5,h6{
  color:green;
}

This works for classes too:
.bold,.bolded,.bolder{
  font-weight:bold;
}

You can also nest selectors. Let’s say I have a div, in which content resides, but I want that content to be styled differently to the rest of the page, without having to declare a style for everything.
.my_div{
  background-color:green;
}
.my_div p{
  color:white;
}
That code will make all paragraph tags WITHIN the .my_div element to be styled that way. You will find this a massive time saver and of great use when dealing with larger web pages.