A kaszkád az, ami a CSS stíluslapokat olyan hasznosnak tekinti. Röviden, a kaszkád határozza meg az egymásnak ellentmondó stílusok alkalmazásának elsőbbségi sorrendjét. Más szóval, ha két stílusa van:
p {szín: piros; }p {szín: kék; }
A kaszkád határozza meg, hogy melyik szín legyen a bekezdéseknek, annak ellenére, hogy a stíluslap azt állítja, hogy piros és kéknek kell lenniük. Végső soron csak egy színre lehet alkalmazni a bekezdéseket, ezért rendelésre kell lennie. Ezt a sorrendet alkalmazza, hogy mely szelektorként (a p a fenti példában) a legmagasabb elsőbbséggel és annak sorrendjével a dokumentumban szerepelnek.
Az alábbi lista egyszerűsíti, hogy a böngésző hogyan határozza meg a stílus elsőbbségét:
- Nézze meg a stíluslapot az elemnek megfelelő szelektorhoz. Ha nincsenek definiált stílusok, akkor használja az alapértelmezett szabályokat a böngészőben
- Tekintse meg a kijelölt szelektort tartalmazó stíluslapot
!fontosés alkalmazza azokat a megfelelő elemekre. - A stíluslap valamennyi stílusa felülbírálja az alapértelmezett böngészőstílusokat (kivéve a felhasználói stíluslapok esetében).
- Minél specifikusabb a stílusválasztó, annál nagyobb a prioritása. Például,
div> p.classpontosabb, mintp.classamely specifikusabb, mintp. - Végül, ha két szabály vonatkozik ugyanarra az elemre, és ugyanazt a választó elsőbbséget élvezi, mint a betöltött utolsó fogják alkalmazni. Más szavakkal, a stíluslapot felülről lefelé olvassuk le, és a stílusokat egymás tetejére helyezzük.
E szabályok alapján a fenti példában a bekezdések kék színűek lesznek, mert p {szín: kék; } jön utoljára a stíluslapon.
Ez a kaszkád nagyon egyszerűsített magyarázata. Ha jobban szeretne többet tudni arról, hogy a kaszkád hogyan működik, akkor olvassa el: Mit jelent a "Cascade" a Cascading Style Sheets-ben ?.
