css grouping and nesting selectors


in style sheet number of elements with the same style.

         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.

                         color:lime ;
                         font-size:20px ;


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

separate selectors with spaces.

for example -

         <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;
         <div  id="top" >
         <h4> this is fourth level heading see nesting selector effect </h4>
         <h4> look the nesting selector effect on h4 element </h4>
         <h4> without nesting h4 level heading </h4>
         <h4> without nesting h4 level heading </h4>