Un lucru la care trebuie sa ne gandim atunci cand scriem CSS este ca un element va mosteni reguli de la parintele sau.
O regula setata pe parinte se va transmite tuturor elementelor din interiorul lui, dar un copil le poate suprascrie.
Mostenirea unei culori
Sa spunem ca avem o pagina cu urmatoarea structura:
<body>
<h1>Titlul paginii</h1>
<p>Subtitlul paginii care de fapt este un paragraf foarte scurt</p>
<div>
<p>Primul paragraf din pagina.</p>
<p>Al doilea paragraf din pagina ce cuprinde cateva <span>cuvinte speciale</span> ce vor fi stilizate altfel.</p>
<p>Ultimul paragraf ce contine cateva cuvinte, dar unul e mai <span>special</span>.</p>
</div>
</body>
Daca vom scrie o regula CSS pentru elementul <body></body> prin care ii setam culoarea gri:
body {
color: gray;
}
Atunci aceasta regula va fi mostenita si de elementele din interiorul lui precum: <h1>, <p> si <div>.
Asadar toate aceste elemente vor avea regula color: gray; setata pe ele.
Dar asa cum <div>-ul mosteneste de la parintele lui <body>, si paragrafele din interiorul lui o vor mosteni. Iar tag-urile <span> vor mosteni de la parintii lor, <p>, si atunci si ele vor avea culoarea gri.
Asadar culoarea gri se transmite tuturor elementelor care nu au o culoare setata in mod expres.
Dar putem intrerupe acest lant.
De exemplu, pe elementul <div>, putem seta culoarea verde:
div {
color: green;
}
Si acum toate elementele din interiorul lui vor avea culoarea verde. <h1> si primul <p> inca raman cu culoarea mostenita de la <body>.
Dar <div>-ul nu va mai mosteni de la nimeni, pentru ca are propria culoare setata.
Aceasta transmitere a regulilor se aplica pentru majoritatea regulilor din CSS, nu doar pentru culoare. Ce reguli se transmit si ce efecte au, vom descoperi doar prin exercitiu.