Kaskadowość CSS oznacza, że przeglądarka może otrzymać kilka reguł dotyczących tego samego elementu i tej samej właściwości, a następnie musi zdecydować, która reguła zostanie zastosowana.
Decyzja zależy głównie od:
- ważności deklaracji, np. !important,
- miejsca zapisania stylu,
- specyficzności selektora,
- kolejności wystąpienia reguł.
Styl inline ma wysoki priorytet
Styl zapisany bezpośrednio w atrybucie style elementu HTML ma zwykle wyższy priorytet niż reguła zapisana w sekcji <style> lub w zewnętrznym pliku CSS.
Przykład:
<style>
h3 { background-color: grey; }
</style>
<h3 style='background-color: orange;'>Rozdział</h3>
W tym przypadku nagłówek h3 otrzyma pomarańczowe tło, ponieważ deklaracja inline style='background-color: orange;' nadpisuje regułę h3 { background-color: grey; }.
Specyficzność selektorów
Im dokładniejszy selektor, tym większy ma priorytet. Przykładowo:
- h3 jest mniej szczegółowy,
- .tytul jest bardziej szczegółowy,
- #naglowek jest jeszcze bardziej szczegółowy,
- styl inline ma bardzo wysoki priorytet.
Ważne na egzaminie
Jeśli w kodzie występują dwie wartości tej samej właściwości CSS, np. background-color, trzeba sprawdzić, która deklaracja ma większy priorytet. W pytaniach egzaminacyjnych często oznacza to rozpoznanie, że styl inline nadpisuje regułę ogólną.