css grouping and nesting selectors

grouping

in style sheet number of elements with the same style.

     h1{
         color:lime ;
                       
         font-size:20px ;    
     }
    
    h4{  color:lime ;
         
         font-size:20px ;         
       }
         
    p {  color:lime ;
         
         font-size:20px ;         
       }

to minimize this css style sheet code, you can use group selectors.

separate each selector by comma.

grouped all selectors which have same css properties.

        h1h4p
                    {
                         color:lime ;
                   
                         font-size:20px ;
                  }

nesting

it is allowed to apply a style for a selector within a selector.

separate selectors with spaces.

for example -

  <html>
  
         <head>
         
         <style  type="text/css" >
         
     #top {
         
            background-color:#3a4b9c ;
            
            font-size:20px ;}
            
         h4 {
         
                color:lime ;
                
                text-decoration:underline ;}
                
     #top h4 {
         
                color:#ffffff ;
                
                font-weight:bold ;
                
                border:10px outset gold;
                
                }
                
         </style></head>
   
   <body>
   
         <div  id="top" >
         
         <h4> this is fourth level heading see nesting selector effect </h4>
         
         <h4> look the nesting selector effect on h4 element </h4>
         
         </div>
         
         <h4> without nesting h4 level heading </h4>
         
         <h4> without nesting h4 level heading </h4>
         
   </body>
   
</html>