Mi az a CSS? A CSS jelentése, bemutatása

Ha nem tudod, hogy mi az a CSS és, hogy mire használjuk, akkor ez a cikk segít eligazodni a témában. Tanuld meg belőle a CSS fogalmát és használatát.

Mi az a CSS? A CSS bemutatása című cikk nyitóképe

Mi az a CSS? A CSS jelentése, bemutatása

Ha ismerkedtél már a weboldalfejlesztéssel, vagy olvastál a HTML-ről, akkor biztosan szembejött veled a CSS is. Hiszen a CSS az egyik legalapvetőbb nyelv a weboldal készítés során. Ebben a cikkben részletesen bemutatjuk, hogy mit jelent a CSS, mire lehet használni, illetve bemutatjuk azt is, hogy hogyan épül fel egy CSS kód. Egyszerűen fogalmazva bemutatjuk a CSS alapjait.

A CSS jelentése, fogalma

A WikiPedia így fogalmazza meg a CSS definícióját: ,,A CSS (Cascading Style Sheets, magyarul: lépcsőzetes stíluslapok) 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.”

Egy kicsit egyszerűbben megfogalmazva én úgy írnám le, hogy: a CSS-el formázhatjuk meg a weboldalunk megjelenését. Például állíthatjuk be a szöveg méretét, kinézetét, színét, határozhatjuk meg, hogy egy oldalon belül hol helyezkedjen el egy kép, hogy hogy nézzen ki ez a kép, legyen-e kerete, le legyen-e kerekítve a sarka stb.

Mire lehet használni a CSS-t?

A teljesség igénye nélkül most felsorolok pár dolgot, amelyet CSS-el lehet megoldani. (Azért nem sorolom fel az összeset, mert a CSS segítségével körülbelül mindent elintézhetünk, így ez egy soha véget nem érő lista volna.)

  • háttérkép beállítása
  • háttérszín beállítása
  • szövegméret beállítása
  • szövegszín beállítása
  • betűtípus meghatározása
  • képek elhelyezkedésének meghatározása
  • szövegigazítás változtatása
  • tartalmak keretezése
  • margó beállítása
  • stb

Miért találták ki a CSS-t, ha ott van a HTML is?

Aki már ismeri a HTML nyelvet az nagyon jól tudja, hogy a HTML-t azért találták ki, hogy leírjuk vele a weboldal tartalmát. Fontos, hogy a tartalmát és nem a kinézetét.

De ahogy haladtunk előrébb az időben, úgy megjelent a fejlesztők részéről az az igény, hogy jó lenne, ha tudnánk a tartalmunkat formázni is. Ezáltal szebbé, egyedibbé tenni weboldalunkat.

Ezért bevezették a HTML nyelven belül történő formázást, amely kisebb káoszhoz vezetett. Nagyon nehéz és idegőrlő volt minden egyes HTML elemhez egyesével hozzáadni a megfelelő formázást.

Ennek a problémának a megoldására a W3C (World Wide Web Consortium) 1990-ben létrehozta a CSS-t. A CSS leválasztja a formázást a HTML-től, emiatt egy sokkal könnyebben átlátható rendszert alkot.

HTML stílus, stíluslap és CSS használata, avagy HTML style cikk nyitóképe

Hogy néz ki egy CSS kód?

A CSS kód megjelenése a csatolási módjától függ, de azt elmondhatjuk általánosságban, hogy (ha nem inline módszert használunk, akkor) először jön az elem neve, amit formázni szeretnénk, majd azután jön az, ahogyan szeretnénk formázni. Például:

ELEM {
   TULAJDONSÁG: ÉRTÉK;
}

Az elem helyére az az elem kerül, amit formázni szeretnénk, például egy p. A tulajdonság helyére az kerül, amelyik tulajdonságát szeretnénk formázni, például, ha a színét szeretnénk, akkor a color. Az érték helyére azt kell írnunk, ahogyan szeretnénk formázni a tulajdonságot. Például a szín esetében, ha pirossá akarjuk tenni, akkor a red. Így néz ki végül a kód.

p {
  color: red;
}
Code language: CSS (css)

Stílusok, stíluslapok csatolási lehetőségei

Egy HTML fájlhoz többféleképpen is csatolhatjuk a CSS stíluslapot:

  • Összekapcsolhatjuk a HTML dokumentumunkat egy külső CSS fájllal
  • A HTML dokumentumon belül a <HEAD> szekcióban is megadhatjuk a stílusbeállításokat
  • Beimportálhatjuk külső stíluslapként
  • Beágyazhatjuk az elem kezdő tag-jébe is a stílus definíciókat

Alább csak nagyon röviden elemzem ezeket a módszereket, mert később következik egy lecke, ahol sokkal részletesebben kifejtem az összes módszert.

Beágyazott, inline stílus

Ez a legegyszerűbb és talán leggyorsabb módszer is, de mindezek ellenére a legkevésbé is ajánlott

Szintaktika

<ELEM style="STÍLUS DEFINÍCIÓK;">TARTALOM</ELEM>
Code language: HTML, XML (xml)

A szintaxisból látszik, hogy itt az adott elem kezdőcímkéjébe biggyesztjük be a stílusbeállításokat. Rendkívül gyorsan használható, mert nem kell új fájlt létrehoznunk, nem kell külső fájlt becsatolnunk. A hátránya az, hogy így csak egyetlen egy elem stílusbeállítását határoztuk meg. Mindegyik elemnek egyesével kell megadnunk a stílusát, ami nagyon időigényes.

Stílus (STYLE) a HEAD szekcióba

Ez a megoldás már sokkal elegánsabb, de még mindig nem a legjobb.

Szintaktika

<HEAD>
     <style type="text/css">
          ELEM {STÍLUSDEFINÍCIÓ;}
     </style>
</HEAD>
Code language: HTML, XML (xml)

A fenti példából látszik, hogy ebben az esetben a stílusbeállításokat a <HEAD> részben helyezzük el, így már lehetőségünk van arra, hogy globálisan formázzuk az összes elemet. Nem szükséges az összes p elemhez bekattintanunk és begépelnünk, hogy piros legyen. Elég csak a <HEAD>-en belül megadnunk, hogy az összes p elem piros legyen.

HTML dokumentum összekapcsolása külső CSS fájllal

Ez a legszebb és leginkább átlátható módszer, hiszen itt a CSS fájl teljesen el van választva a HTML fájltól. Külön fájlba kerül a CSS és a HTML is, így a kód nagyon átlátható marad.

A HTML dokumentum CSS fájllal való összekötésének szintaktikája

<link rel=stylesheet type="text/css" href="CSS.ELÉRÉSI.ÚTVONALA">

Code language: HTML, XML (xml)

Ezt a kódot a HTML fájl <HEAD> részében kell elhelyezni! A fenti kódban egyedül a „href=” utáni részt kell módosítani, ide jön a CSS fájl elérési útvonala.

A CSS fájlban lévő stílus megadás szintaktikája

ELEM
{
STÍLUSDEFINÍCIÓ;
}

Stíluslap importálása

Az @import funkció használatával külső stíluslapokat importálhatunk be a HTML dokumentumba. Ez a módszer nagyban hasonlít az előzőhöz.

Szintaktika

@import url(ELÉRÉSISI.ÚTVONALL);
Code language: CSS (css)

Ez a kód is ugyanúgy a HTML dokumentum <HEAD> szekciójába kerül.

Példa CSS használatára

HTML + CSS kód

<!DOCTYPE html>
<head>
   <style type="text/css">
        p {color:red;}
   </style>
</head>

<body>
   <p>Minden p-nek pirosnak kell lennie.</p>
   <p>Ennek is.</p>
</body>
</html>
Code language: HTML, XML (xml)

Eredmény

Minden p-nek pirosnak kell lennie.

Ennek is.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A fenti kódban az látszik, hogy a stílusbeállításokat a HTML dokumentum fej részébe helyeztem el. Meghatároztam benne, hogy a p elemek színe piros legyen.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!