12. Mi a CSS, hova írjuk | HTML & CSS alapok

Mit fogsz tudni a lecke végén

Felismered és megnevezed egy CSS-szabály összes részét.
Több tulajdonságot állítasz be egyetlen szabályban.
Ismered mind a három elhelyezési módot, és tudod, melyik mikor jó.
Külső stíluslapot csatolsz be <link>-kel.
Kommentelsz a CSS-ben.
Végig tudsz menni egy ellenőrzőlistán, ha „nem hat" a stílusod.

1Mi a CSS?

A CSS a Cascading Style Sheets rövidítése: „lépcsőzetes stíluslapok". A név két dolgot árul el:

Szó	Mit jelent?
Style Sheet stíluslap	Szabályok gyűjteménye arról, hogy mi hogyan nézzen ki.
Cascading lépcsőzetes	Több szabály is vonatkozhat ugyanarra az elemre, és van egy sorrend, ami eldönti, melyik nyer. (Erről a 15. leckében lesz szó.)

A CSS nem programozási nyelv — ugyanúgy nincs benne elágazás, ciklus vagy változó, mint a HTML-ben. Egyszerűen csak állításokat fogalmazol meg: „a bekezdések legyenek szürkék", „a főcím legyen bordó".

MIÉRT KÜLÖN NYELV?

Mert így a tartalom és a megjelenés szétválik. Ennek három nagyon gyakorlati haszna van:

Egy helyen írod, mindenhol hat. Egy szabály az összes bekezdésre vonatkozik — akár tíz oldalon keresztül.
Egyszerű az átszínezés. Az egész oldal színvilágát egyetlen fájlban cseréled le.
Olvasható marad a HTML. A szerkezet nem fullad bele a formázásba.

2A CSS-szabály felépítése

Minden CSS-szabály ugyanígy épül fel. Érdemes a részek nevét is megtanulni, mert végig ezeket fogjuk használni.

Egy CSS-szabály részei. A szelektor mondja meg, mire vonatkozik; a deklaráció azt, mit állítunk be.

Rész	Mi ez?
Szelektor (kijelölő)	Megmondja, mely elemekre vonatkozik a szabály. Itt: minden `h1`.
Deklarációs blokk	A kapcsos zárójelek `{ }` és a köztük lévő minden.
Tulajdonság	Mit állítasz be: `color`, `font-size`, `background-color`…
Érték	Mire állítod: `crimson`, `18px`, `center`…
Deklaráció	A tulajdonság és az érték együtt, kettősponttal elválasztva, pontosvesszővel lezárva.

Az első CSS-szabály

index.html

<h1>Anna konyhája</h1>
<p>Üdvözöllek az oldalamon!</p>
<h1>Ez is egy h1</h1>

style.css

h1 {
  color: crimson;
}

Eredmény a böngészőben

Egyetlen szabály, és mindkét h1 megváltozott — a bekezdés viszont érintetlen maradt. Ez a CSS lényege: egy helyen írod, mindenhol hat.

A PONTOSVESSZŐ

Az utolsó deklaráció után elméletileg elhagyható — de mindig tedd ki. Ha később új sort írsz alá, és elfelejted pótolni, a CSS némán elromlik: hibaüzenet nincs, csak a szabály nem működik.

3Több deklaráció, több szelektor

Egy szabályban akárhány deklaráció lehet — mindegyiket pontosvessző zárja. És egy szabály több elemre is vonatkozhat, ha vesszővel felsorolod őket.

Több tulajdonság és csoportos szelektor

index.html

<h1>Főcím</h1>
<h2>Alcím</h2>
<p>Egy bekezdés, benne egy kis szöveggel,
hogy látszódjon a sortáv és a méret.</p>

style.css

h1, h2 {
  color: #be123c;
  font-family: Georgia, serif;
  border-bottom: 2px solid #fb7185;
}

p {
  color: #52434b;
  font-size: 17px;
  line-height: 1.8;
}

Eredmény a böngészőben

A h1, h2 egyetlen szabály két elemtípusra. A vessző itt azt jelenti: „és". Így nem kell kétszer leírni ugyanazt a három deklarációt.

ÍRÁSMÓD — AMI SEGÍT OLVASNI

A CSS-nek mindegy, hogyan tördeled, de van egy bevett forma, amit érdemes követni:

✔ Olvasható

p {
  color: #52434b;
  font-size: 17px;
}

✘ Egy sorban

p{color:#52434b;font-size:17px;}

Szabályok: a nyitó kapcsos a szelektorral egy sorban, minden deklaráció külön sorban, behúzva, a záró kapcsos külön sorban, és a szabályok között üres sor.

4Kommentek

A CSS-komment /*-gal kezdődik és */-gal végződik. Több sorra is kiterjedhet. Figyelem: a HTML-es  itt nem működik!

style.css

/* ===== FEJLÉC ===== */

h1 {
  color: #be123c;   /* a márkaszínünk */
  font-size: 32px;
}

/* Ezt a szabályt egyelőre kikapcsoltam:
p {
  color: gray;
}
*/

MIRE HASZNÁLD?

Tagolásra: a hosszú stíluslapot szakaszokra bontod (fejléc, tartalom, lábléc).
Magyarázatra: miért van ott egy furcsa érték.
Ideiglenes kikapcsolásra hibakeresésnél — VS Code-ban Ctrl+/.

51. mód: style attribútum

A CSS-t közvetlenül ráírhatod egy elemre a style attribútummal. Itt nincs szelektor — hiszen már tudjuk, melyik elemről van szó: erről az egyről.

Stílus közvetlenül az elemen

index.html

<h1 style="color: crimson;">Első cím</h1>

<h1>Második cím</h1>

<p style="color: gray; font-size: 20px;">
  Egy bekezdés két beállítással.
</p>

Eredmény a böngészőben

Csak az első cím lett bordó — a második nem, mert rá nem írtuk rá. Ez az inline stílus természete: pontosan egy elemre hat.

EZT A MÓDOT KERÜLD

Működik, de szinte minden szempontból rossz:

Nem újrahasznosítható. Száz bekezdéshez százszor kell leírni ugyanazt.
Módosíthatatlan. Ha változik a szín, száz helyen kell átírni.
Olvashatatlanná teszi a HTML-t. A szerkezet elvész a formázásban.
Túl erős. A stíluslapból nagyon nehéz felülírni (15. lecke).

A tananyagban egyszer sem fogjuk használni. Azért látod itt, mert találkozni fogsz vele mások kódjában, és fel kell ismerned.

62. mód: style elem a head-ben

A második lehetőség: a <head>-be teszel egy <style> elemet, és abba írod a szabályokat. Itt már van szelektor, tehát több elemre is hathat.

Belső stíluslap — a teljes dokumentum

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <title>Anna konyhája</title>

  <style>
    body {
      font-family: "Segoe UI", Arial, sans-serif;
      background-color: #fdf2f5;
      padding: 14px;
    }
    h1 {
      color: #be123c;
    }
    p {
      color: #52434b;
    }
  </style>

</head>
<body>
  <h1>Anna konyhája</h1>
  <p>Üdvözöllek az oldalamon!</p>
</body>
</html>

Eredmény a böngészőben

Itt a teljes dokumentumot látod, hogy pontosan lásd a <style> helyét: a <head>-ben van, a <title> után. Ez a szabálykészlet az egész oldalra vonatkozik — de csak erre az oldalra.

MI A BAJ VELE?

Csak egyetlen oldalra hat. Ha ötoldalas weboldalt készítesz, mind az öt fájlba be kell másolnod ugyanazt a stílust — és minden változtatást ötször kell átvezetned. Az egyik fájlban biztosan elfelejted.

MIKOR JÓ MÉGIS?

Ha az oldal tényleg egyetlen fájl: gyors próba, egy apró demó, egy önálló e-mail-sablon. Ilyenkor kényelmes, hogy minden egy helyen van.

73. mód: külső fájl

A harmadik mód — és ezt fogjuk használni végig. A stílust külön .css fájlba írod, és a HTML-ből becsatolod egy <link> elemmel.

a projektmappa

weboldal/
├── index.html
├── rolam.html
├── kapcsolat.html
└── style.css        ← mind a három oldal ezt használja

A becsatolás egyetlen sor, a <head>-ben:

<link rel="stylesheet" href="style.css">

Rész	Mit jelent?
`<link>`	Külső fájl becsatolása. Üres elem — nincs záró tagja.
`rel="stylesheet"`	relationship: milyen viszonyban van a fájl az oldallal. Itt: ez egy stíluslap.
`href="style.css"`	Hol van a fájl — ugyanaz az útvonalszabály, mint a linkeknél (6. lecke).

Valódi külső stíluslap — ez az előnézet tényleg betölt egy .css fájlt

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <title>Anna konyhája</title>
  <link rel="stylesheet" href="demo/stilus-pelda.css">
</head>
<body>
  <h1>Anna konyhája</h1>
  <p>Ezt a megjelenést egy külön fájl adja.</p>
</body>
</html>

Eredmény a böngészőben

Ez nem szemfényvesztés: a demo/stilus-pelda.css egy valódi fájl a tananyag mappájában, és az előnézet tényleg azt tölti be. A HTML-ben egyetlen stílusdeklaráció sincs — minden a külön fájlból jön.

demo/stilus-pelda.css — a becsatolt fájl tartalma

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #fdf2f5;
  color: #3a2f35;
  padding: 16px;
}

h1 {
  color: #be123c;
  border-bottom: 3px solid #fb7185;
  padding-bottom: 6px;
}

p {
  line-height: 1.7;
}

EZÉRT A LEGJOBB

Egy fájl, akárhány oldal. Mindegyik HTML becsatolja ugyanazt.
Egy helyen módosítasz. Átírod a színt, és mind az öt oldal megváltozik.
Gyorsabb az oldal. A böngésző egyszer tölti le, aztán megjegyzi — a többi oldalnál már nem kell újra.
Tiszta marad a HTML. A szerkezet és a megjelenés külön fájlban él.
Könnyebb csapatban dolgozni. Más nyúlhat a tartalomhoz, mint a stílushoz.

A LINK A HEAD-BE MEGY

Ne a <body> végére tedd. Ha a stíluslap később érkezik meg, a látogató egy pillanatra a stílus nélküli oldalt látja, aztán az „bevillan" a helyére. Ezt hívják villanásnak, és elég csúnya.

Útvonalak — ugyanaz, mint a linkeknél

Hol van a CSS-fájl?	A href értéke
Ugyanabban a mappában	`href="style.css"`
Egy `css` almappában	`href="css/style.css"`
A HTML egy almappában van, a CSS feljebb	`href="../style.css"`

8A három mód összevetése

	1. `style` attribútum	2. `<style>` a head-ben	3. külső `.css` fájl
Hatóköre	Egyetlen elem	Egyetlen oldal	Akárhány oldal
Van szelektor?	nincs	van	van
Újrahasznosítható?	✘	részben	✔
Mikor használjuk?	Gyakorlatilag soha	Egyfájlos próbához	Mindig

A SZABÁLY ERRE A TANANYAGRA

Minden feladatban külső style.css fájlt használunk. Az inline stílus és a belső <style> csak azért szerepel itt, hogy felismerd őket mások kódjában — és hogy értsd, miért nem használjuk.

ÉS HA MINDHÁROM OTT VAN?

Akkor is van eredmény: a böngészőnek pontos szabályai vannak arra, melyik nyer. Röviden: az inline a legerősebb, utána a később érkező szabály. A teljes képet a 15. leckében nézzük meg (kaszkád és specificitás).

9Előtte és utána

Nézzük meg, mekkora különbséget okoz tizenöt sor CSS ugyanazon a HTML-en. Ez a HTML pontosan az, amit a 11. leckében építettünk.

Előtte — csupasz HTML

index.html

<div class="kartya">
  <h3>Rakott krumpli</h3>
  <p>Klasszikus magyar étel, egyszerű
  hozzávalókból.</p>
  <p class="ido">60 perc</p>
</div>

Eredmény — CSS nélkül

Működik, olvasható — de semmi nem jelzi, hogy ez egy „kártya". Az osztálynevek ott vannak, csak még nem használja őket senki.

Utána — ugyanaz a HTML, plusz egy stíluslap

index.html (változatlan)

<div class="kartya">
  <h3>Rakott krumpli</h3>
  <p>Klasszikus magyar étel, egyszerű
  hozzávalókból.</p>
  <p class="ido">60 perc</p>
</div>

style.css

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #f8fafc;
  padding: 14px;
}

.kartya {
  background-color: white;
  border: 1px solid #e7d9df;
  border-left: 5px solid #be123c;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kartya h3 {
  margin-top: 0;
  color: #be123c;
}

.ido {
  color: #7c6b74;
  font-size: 14px;
}

Eredmény — ugyanaz a tartalom

A HTML-hez egyetlen karaktert sem nyúltunk. Az összes változás a stíluslapból jön — és mivel osztályra hivatkozik, akárhány kártyára ugyanígy hatna. A .kartya h3 szelektort még nem ismered: ez azt jelenti, hogy „a kártyán belüli h3". A 13. leckében ezzel kezdünk.

10„Nem hat a CSS-em!"

Ezt a mondatot minden kezdő kimondja az első héten. Szinte mindig ugyanaz a hat ok valamelyike. Menj végig rajtuk ebben a sorrendben.

#	Ellenőrizd	Hogyan?
1	Mentettél?	`Ctrl`+`S` mindkét fájlban. A VS Code fehér pöttyel jelzi a mentetlen fájlt.
2	Megtalálja a fájlt?	`F12` → Console. Ha nem találja, 404-es hibát ír ki a `style.css`-re.
3	Jó a `<link>` sor?	Van benne `rel="stylesheet"`? Jó a fájlnév, betűre pontosan?
4	Elgépelted a szelektort?	A `.kartya` és a `.kártya` két különböző név. A pont és a kettőskereszt is számít.
5	Hiányzik egy pontosvessző vagy kapcsos?	Egy hiba után a böngésző az utána következő szabályokat is eldobhatja. Ha a stíluslap „egyszer csak abbahagyja", nézd meg az utolsó működő szabály utáni sort.
6	Felülírja egy másik szabály?	`F12` → jobb oldalt a Styles panel. Ami áthúzva jelenik meg, azt egy erősebb szabály legyőzte. (15. lecke)

A LEGHASZNOSABB ESZKÖZ: F12 → STYLES

Kattints jobb gombbal az elemre → Vizsgálat (Inspect). A jobb oldali panelen megjelenik az összes szabály, ami arra az elemre vonatkozik — és az is, melyik fájl melyik sorából jön. Ha a szabályod ott sincs, akkor a CSS el sem jutott a böngészőig (1–3. pont). Ha ott van, de áthúzva, akkor felülírták (6. pont).

11Tipikus hibák

Hiba	Mi történik, és mi a megoldás?
HTML-komment a CSS-ben: `<!-- -->`	Elrontja a stíluslapot. CSS-ben: `/* ... */`
Kettőspont helyett egyenlőségjel: `color = red`	A deklaráció érvénytelen, a böngésző kihagyja. Helyesen: `color: red;`
Hiányzó pontosvessző	A következő deklaráció is elveszik. Mindig tedd ki, az utolsó után is.
Hiányzó záró kapcsos	Az összes utána következő szabály elveszhet. A behúzás és a VS Code színezése segít megtalálni.
`<style>` tagek a külső `.css` fájlban	A CSS-fájlba csak CSS kerül, HTML-tagek nem.
Hiányzó `rel="stylesheet"`	A böngésző nem tudja, mire való a fájl, és nem alkalmazza. Nem kapsz hibaüzenetet.
Rossz útvonal a `href` attribútumban	404 a Console-ban. Ellenőrizd a mappaszerkezetet és a kis/nagybetűket.
Mértékegység nélküli méret: `font-size: 20`	Érvénytelen — a legtöbb értéknél kötelező az egység: `20px`. (Kivétel például a `line-height`.)

Önellenőrző kérdések

Előbb válaszolj magadban, csak utána nézd meg a megoldást.

1. Nevezd meg ennek a szabálynak a részeit: p { color: gray; }

p = szelektor · { ... } = deklarációs blokk · color = tulajdonság · gray = érték · color: gray; = deklaráció.

2. Mit jelent a vessző itt: h1, h2 { color: red; }?

Azt, hogy „és": a szabály minden h1 és minden h2 elemre vonatkozik. Ezzel nem kell kétszer leírni ugyanazokat a deklarációkat.

3. Ötoldalas weboldalt készítesz. Melyik elhelyezési módot választod és miért?

Külső .css fájlt. Mind az öt oldal ugyanazt csatolja be, így egy helyen módosítasz, a böngésző egyszer tölti le, és a HTML is tiszta marad. Belső <style> esetén ötször kellene karbantartani ugyanazt.

4. Miért kerüljük a style attribútumot?

Mert csak egyetlen elemre hat (nem újrahasznosítható), minden változtatást minden előfordulásnál külön kell átvezetni, olvashatatlanná teszi a HTML-t, és nagyon nehéz felülírni stíluslapból.

5. Beírtad a <link href="style.css"> sort, de semmi nem változik. Mi hiányozhat?

A rel="stylesheet". Enélkül a böngésző nem tudja, hogy stíluslapról van szó — és nem is kapsz hibaüzenetet. (Ha ez megvan, akkor az útvonalat és a fájlnevet ellenőrizd az F12 → Console-ban.)

6. A stíluslapod „félúton abbahagyja": az első négy szabály működik, az utána lévők nem. Mi lehet a baj?

Valószínűleg hiányzik egy záró kapcsos zárójel vagy egy pontosvessző a negyedik szabály környékén. A böngésző ilyenkor „elveszti a fonalat", és az utána következő szabályokat is eldobja. Nézd meg az utolsó működő szabály utáni sorokat.

7. Az F12 → Styles panelen látod a szabályodat, de át van húzva. Mit jelent ez?

Hogy a CSS megérkezett és a szabály vonatkozik az elemre, de egy másik, erősebb szabály felülírta. Tehát nem az útvonallal vagy a mentéssel van baj — a kaszkáddal és a specificitással (15. lecke).

8. Hova kerül a <link>, és miért pont oda?

A <head>-be. Így a böngésző már az oldal kirajzolása előtt ismeri a stílust. Ha a body végére kerülne, a látogató egy pillanatra a stílus nélküli oldalt látná, majd az „bevillanna" a helyére.

12Összefoglalás

A CSS = Cascading Style Sheets. Nem programozási nyelv: állításokat fogalmazol meg a megjelenésről.
A szabály részei: szelektor + deklarációs blokk { }, benne tulajdonság: érték; párokkal.
Egy szabályban akárhány deklaráció lehet; a szelektorokat vesszővel sorolhatod fel.
A pontosvesszőt mindig tedd ki — a hiánya némán elrontja a következő deklarációt.
CSS-komment: /* ... */. A HTML-es  itt nem működik.
1. mód — style attribútum: egy elemre hat, nincs szelektor. Kerüld.
2. mód — <style> a head-ben: egy oldalra hat. Csak egyfájlos próbához.
3. mód — külső .css + <link rel="stylesheet" href="...">: ezt használjuk mindig.
A <link> a <head>-be megy, és az útvonala ugyanúgy működik, mint a linkeknél.
Ha „nem hat a CSS": mentés → 404 a Console-ban → rel és útvonal → elgépelt szelektor → hiányzó pontosvessző/kapcsos → felülírás.
Az F12 → Styles panel mindent megmutat: mely szabályok hatnak, honnan jönnek, és melyiket írták felül (áthúzva).