A CSS helye a webfejlesztésben

A mai komplex weboldalak felépítésében több technológia is fontos szerepet játszik - a CSS csak egy ezek közül. A CSS célja, feladata, hogy a HTML által felépített oldalstruktúra megjelenését, formázását megvalósítsa. Ez tehát azt jelenti, hogy az oldal tartalmát, az oldal elemeit, stb., nem maga a CSS tárolja és valósítja meg. A CSS tulajdonképpen csak a HTML-ben leírtak, összerakottak megjelenéséért felelős.

Amenniben még nem ismerkedtél meg a HTML nyelvvel, érdemes a tanulmányaidat ott kezdened - a CSS megismeréséhez ugyanis szükséged lesz a HTML megértésére, alapvető ismeretére.

Hogyan kapcsolódik a HTML-hez a CSS?

Ezt a részletet megtalálod a HTML tananyagunkban is, azonban mivel itt is fontos, ezért itt is elhelyeztük.

A CSS, bár egy önálló nyelv, nagyon szoros kapcsolatban van a HTML-lel. Alapvetően 3 lehetőség van arra, hogy CSS kódot helyezzünk el a HTMl-ben, mindnek megvan persze a maga előnye és hátránya:

Külső CSS fájl: a CSS kód egy külön fájlba kerül, amit utána a link taggel csatolunk az oldalhoz.
Stílus az oldalon belül: a CSS kód egy style elemben kerül elhelyezésre az oldalon belül.
inline CSS: az adott elem formázását közvetlen az elemen magán jelöljük, a style paraméterrel.

Amennyiben több, hasonló kinézetű oldalt szeretnénk készíteni, mert az oldalunk több fájlból, lapból áll, és szeretnénk ezeket egységes megjelenéssel ellátni, érdemes a CSSt egy külső fájlban megírni, ugyanis így könnyedén becsatolhatjuk ezt bárhány oldalra. Ehhez nincs más dolgunk, mint létrehozni egy .css kiterjesztésű fájlt, elkészíteni bele a stíluslapot, majd az oldalak head részében elhelyezni az alábbi taget:

<link rel="stylesheet" href="css_fájl_elérési_útja">

Amennyiben olyan CSS kódot készítünk, ami csak egy adott oldalra vonatkozik, vagy valamiért nem szeretnénk külső fájlt használni, akkor használhatjuk a style elemet, amibe CSS kódot írhatunk. Ezt az elemet az oldal bármely részén elhelyezhetjük, mivel önmagában nem jelenik meg, de jellemzően a head részben szokás elhelyezni, így:

<style>
  CSS kód helye
</style>

Ha pedig gyorsan szeretnénk egy elemet egyedileg formázni, alkalmazhatjuk az inline CSS-t is. Fontos, hogy ez esetben szelektort nem adhatunk meg! A CSS arra az elemre kerül alkalmazásra, amelyen a style paraméter elhelyezésre került, más elemet nem tudunk formázni ebből az attribútumból! Ezt a megoldást így használhatjuk:

<span style="CSS helye">