Mi az a CSS?

Kaskádos stíluslapok (CSS) — egy stílusnyelv, amelyet a dokumentum megjelenítésének leírására használnak, amely markup nyelven íródott (HTML, XHTML, SVG, XML).

A CSS fő funkciói:

A megjelenítés és a tartalom szétválasztása: Lehetővé teszi egy weboldal megjelenésének módosítását anélkül, hogy megváltoztatná szerkezetét.
Elemenst stilizálás: Színek, betűtípusok, méretek, margók, keretek és más vizuális tulajdonságok kezelése.
Reszponzív dizájn létrehozása: Media Queries segítségével különböző stílusokat alkalmazhatunk a felhasználó eszközének jellemzői (képernyőfelbontás, orientáció stb.) szerint.
Animációk és átmenetek: Vizuális effektusok létrehozása az interaktivitás és a felhasználói élmény javítása érdekében.
Elrendezés kezelése: Elemenst pozícionálás különböző technikák (Flexbox, Grid, floatok stb.) segítségével.

CSS szabály szerkezete:

/* Selector */
h1 {
  /* Deklarációk */
  color: blue; /* Tulajdonság: érték; */
  font-size: 24px;
}

A CSS csatolásának fő módszerei HTML dokumentumhoz:

Külső fájl (<link>): A leggyakoribb és ajánlott módszer. A stílusokat külön .css fájlban tárolják.
```
<link rel="stylesheet" href="styles.css">
```
A <style> tag belsejében: A stílusokat közvetlenül a HTML dokumentumban határozzák meg, általában a <head> szekcióban. Kisebb stílusok vagy gyors tesztek esetén alkalmas.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Inline stílus (style attribútum): A stílusokat egy adott HTML elemre alkalmazzák a style attribútum segítségével. Magas prioritással rendelkezik, de megnehezíti a karbantartást és a skálázást.
```
<div style="border: 1px solid black;">
  Ez a div inline stílussal rendelkezik.
</div>
```

A kaszkádolás meghatározza, hogy a böngésző hogyan alkalmazza a stílusokat, ha több szabály ütközik ugyanarra az elemre. Figyelembe veszi:

A szelektorok prioritása: A specifikusabb szelektorok magasabb prioritással rendelkeznek.
A deklarációk sorrendje: A később megadott szabályok felülírják a korábbiakat ugyanazzal a prioritással.
!important: Az !important-tel jelölt deklarációk a legmagasabb prioritással rendelkeznek (óvatosan használja).
A stílusok forrása: A szerző stílusai magasabb prioritással bírnak, mint a felhasználói vagy az alapértelmezett böngészőstílusok.