A CSS (angolul Cascading Style Sheets) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. A CSS-t a weblapok szerkesztői és olvasói egyaránt használhatják, hogy átállítsák vele a lapok színét, betűtípusait, elrendezését, és más, megjelenéshez kapcsolódó elemeit. A tervezése során a legfontosabb szempont az volt, hogy elkülönítsék a dokumentumok struktúráját (melyet HTML-ben vagy egy hasonló leíró nyelvben lehet megadni) a dokumentum megjelenésétől (melyet CSS-sel lehet megadni). Az ilyen elkülönítésnek több haszna is van: egyrészt növeli a weblapok használhatóságát, rugalmasságát és a megjelenés kezelhetőségét, másrészt csökkenti a dokumentum tartalmi struktúrájának komplexitását. A CSS ugyancsak alkalmas arra, hogy a dokumentum stílusát a megjelenítési módszer függvényében adja meg, így elkülöníthető a dokumentum formája a képernyőn, nyomtatási lapon, hangos böngészőben (mely beszédszintetizátor segítségével olvassa fel a weblapok szövegét), vagy braille készüléken megjelenítve.

A CSS információkat a lapokhoz több módon lehet megadni.

1) Szerzői stílus:

• külső CSS fájl a dokumentumból hivatkozva;
• beágyazva a dokumentumba;
• azonnali, felülírva az általános stílust egy konkrét esetre.

2) Felhasználói stílus:

• egy helyi CSS fájl az összes dokumentumra, melyet a felhasználó a böngésző beállításaiban adhat meg; a felhasználó megadhatja, hogy a szerző és a saját stílusai közül melyik legyen fontosabb.

3) Kliens stílus:

• egy alapértelmezett stílus, melyet a kliens vagy a böngésző használ az elemekhez.

A CSS a szabályokat a kapcsolódások alapján súlyozza, így mikor egyszerre több szabály is érvényes lehet egy elemre, akkor a legfontosabb szabályt alkalmazza.

A CSS használatának legfontosabb előnyei:

• Több lap vagy akár egy teljes webhely stílusait egy helyen lehet tárolni, így gyorsan és könnyen frissíthető.
• Különböző felhasználókhoz különböző stílusokat lehet rendelni: például könnyen olvasható, nyomtatható stílusok.
• A dokumentum mérete és komplexitása csökken, mivel nem tartalmaz információkat a megjelenítéshez.

 

A CSS egyszerű szintaxissal rendelkezik, csak néhány angol nyelvű kulcsszót használ a stílusok tulajdonságaihoz. A stíluslap maga a stílust leíró szabályok sora. Minden szabályhoz tartozik egy szelektor és egy deklarációs szakasz. Ez utóbbi kapcsos zárójelek között pontosvesszővel elválasztott deklarációkat tartalmaz. A deklarációk formája a következő: a tulajdonság neve, egy kettőspont, majd az adott tulajdonság értéke.

Például:

p {

font-family: "Garamond", serif;

}

h2 {

font-size: 110%;

color: red;

background-color: white;

}

.megjegyzes {

color: red;

background-color: yellow;

font-weight: bold;

}

p#bevezetes {

border: 3px dashed black;

}

a:hover {

color: yellow;

background-color: navy;

}

Ez összesen öt szabály a p, h2, .megjegyzes, p#bevezetes és a a:hover szelektorokra. A deklarációra egy példa a color: red, ahol a color (szín) tulajdonság értéke red (vörös).

Az első két szabályban a p (bekezdés) és h2 (második szintű címsor) HTML elemekhez rendeltünk stilisztikai tulajdonságokat. A bekezdések Garamond betűtípussal lesznek megjelenítve, vagy ha nincs ilyen, akkor valamilyen más talpas (serif) betűtípussal. A második szintű címsorok vörös színnel és fehér háttérrel jelennek meg.

A harmadik szabály egy CSS osztályt definiál, melyet bármilyen elemhez hozzá lehet rendelni a dokumentumban a class attribútummal.

Például:

<p class="megjegyzes">Ez a bekezdés félkövér, vörös színű lesz, sárga háttérrel.</p>

A negyedik szabály egy olyan p elemre vonatkozik, melynek id attribútuma bevezetes: ez az elem egy 3 pixel széles fekete szaggatott keretet fog kapni.

Az utolsó szabály a hover állapothoz tartozó megjelenést szabályozza az a elemhez (többek között a hiperlinkek is ilyen elemek). A szabály meghatározza, hogyan nézzen ki az elem, amikor az egérmutató fölötte áll. A példában az elem háttérszíne ilyenkor sötétkék, a szövege színe sárga lesz.