CSS definíciója: Mi az a CSS, hogyan működik a CSS? Fontos információk a CSS működésével kapcsolatban

css

A CSS definíciója

A CSS (Cascading Style Sheets – „lépcsőzetes stíluslapok”) egy, a W3C által létrehozott szabvány, amely a weboldalak megjelenésének testreszabását teszi lehetővé. A CSS első verziója 1996-ban jött létre, mert a HTML nem volt alkalmas a webhelystílusok részletes beállítására.
A weboldalak különböző betűtípusokat, színes háttereket és egyéb stílusokat használtak, és ezek módosítása nagyon hosszadalmas és gyakran drága feladatnak bizonyult, főleg a nagyobb webhelyeken. A W3C ezt a problémát szerette volna áthidalni a CSS-sel.
 
A HTML és a CSS manapság szinte elválaszthatatlanok egymástól. A HTML-t csupán jelölőnyelvként szokás használni, vagyis csak a webhely tartalmának elhelyezésére szolgál. A CSS felel az oldalak esztétikai jellemzőiért, beleértve a betűtípusokat, a betűméreteket, a bekezdések megjelenését, a színeket, az animációkat és így tovább.
Habár egy webhely elméletileg tökéletesen működhet CSS nélkül is, mindenféle stílus hiányában rendkívül kezdetlegesnek és olcsónak tűnne.
 

A CSS előnyei

Nagyon könnyedén fel lehet ismerni azokat a webhelyeket, amelyek nem használnak CSS-t. Ha veled is előfordult már, hogy egy oldal fehér háttérrel, rendezetlen képekkel és bekezdésekkel, illetve fekete és kék szöveges elemekkel jelent meg, akkor valószínűleg nem töltött be megfelelően a CSS dokumentum, ami ezen hiányzó stílusokat tartalmazta.
Manapság sok oldal elrendezése is CSS-sel kerül kialakításra, ezért CSS nélkül sok oldal teljesen átláthatatlanná és használhatatlanná válik.
 
A CSS megjelenése előtt minden stílusjellemzőt HTML-lel kellett megoldani, tehát külön meg kellett adni a hátteret, a szövegek színeit, az elemek elrendezését, és minden mást is – már ha a HTML lehetővé tette az elképzeléseket.
A CSS egyik legnagyobb előnye, hogy ezek a stílusok egy teljesen különálló fájlban is elhelyezhetők, amire aztán elég csak hivatkozni a HTML dokumentum tetején. A stílusok így nem foglalják a helyet a HTML-ben, így mindkét fájl átláthatóbb és könnyebben szerkeszthető.
Ezzel a módszerrel több oldalhoz is hozzá lehet csatolni ugyan azt a CSS fájlt, aminek köszönhetően egyetlen fájlal lehet módosítani akár több száz, vagy több ezer oldal stílusát is.
A modern CSS szinte korlátlan lehetőséget biztosít a különböző stílusok kialakítására, így igazán egyedi, látványos, de funkcionális weboldalak alakíthatók ki vele.
 

A CSS működése

A CSS egyszerű angol nyelvű szintaxist használ, és különféle szabályok vonatkoznak rá.
A CSS működéséhez először is ismerned kell a HTML dokumentum elemeit. Ezek például a bekezdések (
<p>
) vagy általános blokkok (
<div>
) és így tovább. Az elemkehez továbbá osztályok (class) és azonosítók (ID) is megadhatók, hogy könnyebben meg tudd különböztetni őket, és különálló csoportokat alakíthass ki belőlük.  <div>

Kiválasztók

A CSS használatához először is meg kell adnod, hogy mely elemtípusokra, osztályokra vagy azonosítókra szeretnéd alkalmazni a kívánt stílust – ez nevezzük kiválasztásnak. Például megszabhatod, hogy az összes bekezdés (
<p>
) elemet szeretnéd-e megváltoztatni, vagy csak azokat, amikhez egy adott osztályt rendeltél hozzá.
 

Stílusdeklarációk

A kiválasztást egy {kapcsos zárójelek közé zárt} blokk követi, amely a stílusdeklarációkat tartalmazza. Itt adhatod meg, hogy mekkora legyen a betűméret, milyen színeket szeretnél alkalmazni, mekkora legyen a térköz az elemek között, és így tovább.
 

Belső, külső és inline CSS stílusok

Egy HTML dokumentumban három helyen is megadhatod a kívánt CSS stílusokat, de egyáltalán nem mindegy, hogy hol használod őket.

Külső CSS

A külső CSS használata a leggyakoribb legkényelmesebb módszer. Külső CSS használatakor egy különálló .css kiterjesztésű fájlra kell hivatkoznod a HTML dokumentumban, és a böngésző ebből a fájlból olvassa majd ki, hogy mely elemekre milyen stílusokat kell alkalmaznia azok megjelenítésekor.
Ezt a különálló, külső CSS fájlt bármennyi HTML dokumentumhoz hozzácsatolhatod ezzel az egyszerű hivatkozási módszerrel, tehát ez az egyetlen észszerű módszer, ha több tucat, vagy akár több száz oldalon szeretnéd ugyan azt a stílust használni.
 

Belső CSS

A belső CSS a közvetlenül a HTML dokumentumban deklarált CSS stílusokat jelenti. Ezek a stílusok általában a dokumentum tetején helyezkednek el.
A belső CSS ideális gyors és egyszerű CSS stílusok alkalmazására, viszont ezek csak arra a HTML dokumentumra vonatkoznak majd, amelyben szerepelnek. Ez egy ritkábban használt módszer, mert kevés gyakorlati előnyt kínál a külső CSS-sel szemben. Egyedül akkor lehet igazán hasznos, ha nem férsz hozzá a külső CSS fájlhoz.
 

Inline CSS

Az inline CSS közvetlenül a HTML elemek  közé kerül a
<style>
tagbe.