Blog

CSS – Cascading Style Sheets

« Back to Glossary Index

CSS (Cascading Style Sheets) je štandardný štýlovací jazyk používaný na úpravu vzhľadu webových stránok. Umožňuje oddeliť dizajn (štýl) od obsahu stránky, ktorý je napísaný v jazyku HTML. CSS ovplyvňuje rôzne aspekty prezentácie stránky, ako sú farby, písma, rozloženie a umiestnenie prvkov, čo umožňuje tvorcom webov vytvárať vizuálne atraktívne a užívateľsky prívetivé stránky.

Ako CSS funguje

CSS súbory obsahujú pravidlá a vlastnosti, ktoré určujú, ako majú byť jednotlivé prvky na stránke zobrazené. Každé pravidlo v CSS sa skladá zo selektora (napr. názvu prvku, ID alebo triedy) a súboru vlastností (napr. color, font-size, margin), ktoré definujú, ako má byť daný prvok zobrazený.

Použitie a aplikácia CSS

  • Externé CSS súbory: CSS kód je uložený v samostatnom súbore s príponou .css, ktorý je prepojený s HTML súborom. Toto riešenie umožňuje použiť rovnaký štýl na viacerých stránkach.
  • Interné CSS: CSS môže byť napísané priamo v HTML dokumente v sekcii <style>.
  • Inline CSS: Štýly môžu byť tiež definované priamo pri konkrétnych HTML prvkoch cez atribút style. Toto je však najmenej využívaná metóda, pretože komplikuje správu kódu.

Kľúčové vlastnosti CSS

  • Kaskádovitosť: CSS pravidlá sa aplikujú v poradí (od najšpecifickejších po všeobecné), čo umožňuje ovplyvňovať určité prvky a prepisovať štýly podľa potreby.
  • Dedičnosť: Určité vlastnosti sa dedia medzi prvkami (napr. farba textu z rodičovského prvku môže byť zdedená potomkom).
  • Znovupoužiteľnosť: Rovnaký CSS súbor môže byť použitý pre viac stránok, čo šetrí čas a znižuje množstvo kódu.

Výhody CSS

  • Lepšia správa vzhľadu: Zmena dizajnu jednej stránky môže automaticky aktualizovať všetky stránky používajúce rovnaký CSS súbor.
  • Zníženie veľkosti HTML kódu: Odstránením inline štýlov a umiestnením CSS pravidiel do samostatných súborov sa HTML kód stáva prehľadnejším.
  • Optimalizácia pre rôzne zariadenia: CSS umožňuje vytvárať responzívny dizajn, ktorý sa prispôsobí rôznym veľkostiam obrazovky a zariadeniam.

Nevýhody CSS

  • Kompatibilita prehliadačov: Niektoré vlastnosti môžu fungovať inak v rôznych prehliadačoch, čo si vyžaduje testovanie a optimalizáciu.
  • Zložitosť pri rozsiahlych projektoch: Pre komplexné projekty môže byť CSS náročné na správu a môže vyžadovať použitie CSS preprocesorov, ako sú SASS alebo LESS.

Príklad základného CSS kódu

body {
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  color: #0066cc;
  font-size: 24px;
}

p {
  line-height: 1.6;
  margin-bottom: 10px;
}

CSS v praxi: CSS hrá dôležitú úlohu pri vytváraní moderných, responzívnych a estetických webových stránok. Okrem toho podporuje aj animácie a prechody, ktoré umožňujú plynulý pohyb a interaktivitu na stránke, čím zvyšuje celkovú užívateľskú skúsenosť.

CSS je neoddeliteľnou súčasťou tvorby webových stránok a je jedným z hlavných pilierov moderného webového dizajnu, spolu s HTML a JavaScriptom.

« Späť na slovník pojmov
JavaScriptSlug