Browser-ul foloseste cateva reguli destul de simple pentru a aplica regulile CSS.
Stim ca exista trei metode prin care noi putem scrie CSS: intr-un fisier separat, in tagul <style> sau sau direct pe element folosind atributul style, metoda numita si inline.
Primele doua sunt oarecum similare pentru ca ambele se folosesc in interiorul elementului <head></head>.
Daca de exemplu avem o regula pentru paragrafele din pagina ce schimba culoarea textului si aceasta se afla intr-un fisier .css si aceeasi regula (dar cu alta valoare) va fi si in tagul <style>, iar tagul e dupa fisierul nostru, atunci culoare finala va fi cea din <style>.
<head>
<link rel="stylesheet" href="reguli.css" type="text/css" />
<style>
p {
color: blue;
}
</style>
</head>Browser-ul va aplica ultima regula CSS intalnita.
Dar daca tagul <link /> este dupa <style> atunci regulile din fisier vor fi aplicate ultimele.
Adica paragraful va avea culoarea data in fisier, nu cea din <style>.
Asadar regulile din fisier si cele din <style> au aceeasi importanta. Conteaza doar care sunt ultimele citite de browser.
Dar daca exista, regulile inline le va suprascrie si pe cele din fisier si pe cele din tagul de <style>. Dar aceasta metoda de a scrie CSS nu este recomandata asa ca nu vom discuta despre ea foarte mult.
Efectul de cascada
Dar atunci cand se suprascrie o regula ce provine din alta parte, asa cum avem in exemplu de mai sus, nu se vor pierde toate regulile. De exemplu daca in fisierul reguli.css avem urmatorul cod:
p {
color: purple;
font-size: 18px;
}
Atunci codul din <style>, nu va reseta toate regulile de mai sus. Altfel spus regula font-size: 18px; va ramane si doar regula color: purple; va fi suprascrisa.
Asadar in CSS cand scriem din nou reguli pentru un element pentru care am scris deja mai devreme, nu vom reseta toate regulile lui, ci pur si simplu le vom completa, si doar acolo unde exista conflicte, acestea se vor suprascrie.
Acest lucru se numeste efectul de cascada, de aceea si numele Cascading Style Sheets.