web - CSS inheritance the right way -

i trying follow this link inheritance in css work. accepted answer assume works way. don't want have div layer use multiple classes(unless correct way) job done.

 <div class="bannermain shadowbanner" >         div class bannermain has shadowbanner properties  </div> 

what wrong i doing here? div uses banner main should have been on top , 1 uses shadow main should have been @ bottom since using bottom: 50px; there. div class shadowbanner should have had shadow because defined in shadowbanner class.

edit

what want have 1 css class has basic , feel apply div layers on page. in case bannermain such class have applied div id=main. each other layer have contained in css class 'bannermain', plus whatever else defined in own specific class. in example above have applied css shadowbanner div id=withshadow

the end result "main" div showing without shadow , no background color , "withshadow" div shown having black background , having shadow , remaining properties assigned in shadowbanner css class along inheriting display: block; , text-align:center; parent css class "main"

i trying figure out inheritance in css , trying see if there parallels inheritance observed in regular java or c# world

okay think understand want now. please read michiganfootball20's answer well. must aware when

.bannermain, .shadowbanner{styles here} 

that both bannermain , shadowbanner use properties. want shared properties between bannermain , shadowbanner. put in there. if want styles specific shadowbanner, shadow , background, put them in shadowbanner class.

don't think of inheritance, think of shared properties. think getting confused because think trying make complicated when doesn't need be.

please @ fiddle , let me know if have other questions.

i have updated fiddle @ if click line.