CSS Grouping & Nesting

CSS Grouping

In CSS, most of the time same style will be applied to multiple elements. The code size can be minimized by grouping the selectors and separating them by commas like shown below.

<style>

h1 {
   color:blue;
   }
h2 {
   color: blue;
   }
h3 {
   color: blue;
   }
   
h1, h2, h3 
{
color: blue;
}

</style>
		

CSS Nesting

CSS Nesting is used to apply CSS to a selector inside a selector.

In the below example, the CSS style is applied to the paragraphs under the class "para1" instead of all paragraphs.

<style>

p {
  color:blue;
  }
  
.para1 p {
	 color:red;
	 }
	 
</style>
		

Next Lesson > CSS3 Tutorials