A CSS a rangsorolt stíluslapokat jelenti magyarul. Az elnevezés abból származik, hogy egyetlen HTML oldalhoz egyszerre több külső és belső stíluslapot is hozzárendelhetünk, és közben még szövegközi stílusokat is alkalmazhatunk. Emlékeztetőül:
- Külső stíluslapot használunk akkor, amikor egy CSS fájlt hozzákapcsolunk egy HTML oldalhoz.
- Belső stíluslapot használunk akkor, amikor a stílusdefiníciókat magába a HTML oldal fejrészébe (
<head>...</head> ) írjuk.
- Szövegközi stílust minden címkéhez megadhatunk a
style attribútummal.
Tehát egy oldalhoz egyszerre több külső stíluslapot is csatolhatunk, és közben még használhatunk belső és szövegközi stílusokat is ugyanabban az oldalban. Ez akkor lesz érdekes, ha a különböző stíluslapok ugyanarra a címkére írnak elő ugyanolyan tulajdonságokat. Ekkor a böngészőnek el kell tudnia dönteni, hogy melyik stílus végezze a formázást. Ezzel kapcsolatban általános szabályként elmondható: Mindig a formázandó HTML kódhoz legközelebbi stíluslap végzi a formázást.
Tegyük fel, hogy egy oldalhoz 3 külső stíluslapot csatolunk, és használunk belső és szövegközi stílusokat is. Ha ezek a különböző stíluslapok ugyanarra a címkére írnak elő formázást, akkor végül az adott címkéhez legközelebbi stílus fog rá hatással lenni. Ez azt jelenti, hogy a böngésző elkezd a HTML kódban fentről lefelé haladni, és mindig alkalmazza a talált stílusokat a megfelelő címkékre. Először olyanná fogja formázni az oldalt, ahogyan a forrásban legelsőnek megadott külső stíluslapban találja. Utána folytatja a formázást a forrásban másodikként megadott stíluslappal, ez a stíluslap át fogja írni azoknak a címkéknek a tulajdonságait, amiket az előtte lévő első stíluslap is megadott. A böngésző ugyanígy jár el a harmadikként megadott külső stíluslap, és a belső stíluslap esetén is. Végül, egy címkére megadott szövegközi stílus felül fogja írni az összes előtte lévő stílust.
A formázásokra azonban még két másik stíluslap is hatással van: a böngésző alapértelmezett stíluslapja, és a felhasználó által beállított stílusok.
A böngésző is stíluslapokat használ egy olyan oldalhoz is, amihez mi semmilyen stílust nem adtunk meg. A böngésző ebben a stíluslapban olyanokat definiál, hogy például a h1 címsor vastagon és nagyobb betűmérettel jelenjen meg; a linkek kékek és aláhúzottak legyenek stb. Érhető módon ezt a stíluslapot akármelyik más felül fogja írni, hiszen ez az alapértelmezett megjelenést írja le a böngésző által.
A legtöbb böngészőben megadhatunk saját magunk által írt stíluslapot, ami alapján a böngésző alapértelmezettként meg fogja jeleníteni az oldalt. Ebben például nagyobb szövegméretet tudunk megadni. Azonban a saját stíluslapot nagyon kevesen állítják be, inkább a szöveg méretét szokták csak beállítani egy böngészőben.
Az alábbi ábra az imént elmondottakat mutatja be. Az ábra olyan sorrendben jelzi a stílusokat, amilyen sorrendben a kódban előfordulnak, és amilyen közel állnak a formázandó címékhez. A lentebb, azaz a formázandó címkéhez közelebb álló stílus felülbírálja a hátrébb állót:
Böngésző alapértelmezett stíluslapjai.
↓
Felhasználó beállításai.
↓
Külső stíluslap
↓
Beágyazott stílus
↓
Szövegközi stílus
↓
Formázandó címke
Ha a felhasználó beállította egyes értékekre, hogy felülbírálják a weboldalak által megadott stílusokat, akkor így módosul a sorrend: (Ez sokkal ritkább eset)
Böngésző alapértelmezett stíluslapjai.
↓
Külső stíluslap
↓
Beágyazott stílus
↓
Szövegközi stílus
↓
Felhasználó beállításai.
↓
Formázandó címke
|