Základy CSS

[Odin]

Základy CSS (Cascading Style Sheets)

1. Čo je CSS?

CSS (Cascading Style Sheets) je jazyk na štýlovanie (vzhľad) HTML dokumentov. Pomocou neho určíte:

• farby, písma, veľkosti textu
• rozloženie (layout) – kde sa bloky nachádzajú na stránke
• reakciu na rôzne zariadenia (responsívny dizajn)

Prečo sa volá “cascading”?
Štýly môžu pochádzať z viacerých zdrojov (vstavaný štýl, interný <style> blok, externý súbor). Ak sa pravidlá prekrývajú, rozhoduje kaskáda – priority a špecifickosť určuje, ktoré pravidlo má prevážiť.

---

2. Ako prepojiť CSS s HTML

2.1 Externý súbor

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

style.css je bežný textový súbor s príponou .css.

2.2 Interný štýl (v hlavičke)

<style>
  body { background:#f5f5f5; }
</style>

2.3 Inline štýl (priamo v elemente) – nedoporučuje sa

<p style="color:red;">Text</p>

---

3. Základná štruktúra CSS pravidla

selector { property: value; property2: value2; }

• selector – určuje, na ktoré HTML elementy sa pravidlo aplikuje
• property – názov vlastnosti (napr. color, margin)
• value – hodnota vlastnosti (napr. red, 10px)

Príklad

h1 {
    color: #2c3e50;      /* farba textu */
    font-size: 32px;      /* veľkosť písma */
    margin-bottom: 20px; /* spodný okraj */
}

---

4. Typy selectorov

Typ selectoru	Syntax	Príklad	Popis
Element (tag)	p	p {margin:0;}	Všetky <p> elementy
Class	.meno-triedy	.button {padding:10px;}	Všetky elementy s class="button"
ID	#identifikátor	#header {background:#fff;}	Jediný element s id="header"
Atribút	[atribút] alebo [atribút="hodnota"]	input[type="text"] {width:200px;}	Podľa atribútu
Descendant	rodič potomok	nav a {color:#333;}	Všetky <a> vnútri <nav>
Child	rodič > potomok	ul > li {list-style:none;}	Priamo podriadené <li>
Pseudo‑class	:hover, :first-child	a:hover {text-decoration:underline;}	Stav elementu
Pseudo‑element	::before, ::after	p::first-letter {font-size:200%;}	Časť elementu
Group	selector1, selector2	h1, h2, h3 {margin:0;}	Viacero selektorov naraz

---

5. Kaskáda a špecifickosť

5.1 Poradie zdrojov

1. User‑agent (prehliadač – predvolené štýly)
2. User style sheets (užívateľské nastavenia)
3. Author style sheets
   • Inline štýl (najvyššia priorita v tejto úrovni)
   • Externé/Interné štýly

5.2 Špecifickosť (specificity)

Špecifickosť sa počíta ako trojka (a,b,c):

• a – inline (style=) → 1 alebo 0
• b – počet ID selectorov
• c – počet class, atribút a pseudo‑class selectorov
• d – počet element a pseudo‑element selectorov

Príklad:

/* a=0, b=1, c=0, d=0 */   #menu { … }          → (0,1,0,0)
/* a=0, b=0, c=1, d=1 */   .nav a { … }        → (0,0,1,1)
/* a=1, b=0, c=0, d=0 */   style="…" (inline)  → (1,0,0,0)

Vyššia hodnota v ľavom stĺpci prevažuje.

5.3 !important

Pridanie !important k vlastnosti prekona všetky ostatné pravidlá, okrem iných !important s vyššou špecifickosťou. Používať opatrne – znižuje čitateľnosť a udržiavateľnosť kódu.

---

6. Box model (model rámčekov)

Každý blokový alebo inline‑block element je obdĺžnik pozostávajúci z:

+---------------------------+
| margin (vonkajšia medzera)|
|  +---------------------+ |
|  | border (okraj)      | |
|  |  +---------------+  | |
|  |  | padding (vnú) |  | |
|  |  |  +-----------+|  | |
|  |  |  | content   ||  | |
|  |  |  +-----------+|  | |
|  |  +---------------+  | |
|  +---------------------+ |
+---------------------------+

• content – samotná hodnota (text, obrázok…)
• padding – vnútorná medzera okolo obsahu
• border – okraj (šírka, štýl, farba)
• margin – vonkajšia medzera medzi elementmi

Zmena výpočtu šírky / výšky

/* predvolené – content‑box */
.box { width:200px; padding:20px; border:5px solid; margin:10px; }

/* box‑sizing: border-box → šírka zahrňuje padding a border */
.box { box-sizing:border-box; }

---

7. Základné vlastnosti a hodnoty

Skupina	Príklady vlastností	Tipy
Typografia	font-family, font-size, font-weight, line-height, text-align, text-decoration	Používajte web‑safe fonty alebo Google Fonts
Farby	color, background-color, background-image, opacity	Hex (#ff6600), RGB (rgb(255,102,0)), HSL (hsl(30,100%,50%))
Rozmiestnenie	margin, padding, border, width, height, max-width, min-height	Skúste box‑sizing:border-box pre jednoduchší výpočet
Zobrazenie	display (block, inline, inline-block, flex, grid, none), visibility, overflow	Flex a Grid sú moderné riešenia pre layout
Pozícia	position (static, relative, absolute, fixed, sticky), top/right/bottom/left, z-index	position:sticky je skvelý pre “prilepené” hlavičky
Flexbox	display:flex, flex-direction, justify-content, align-items, gap	Rýchle 1‑rozmerné rozloženie
Grid	display:grid, grid-template-columns, grid-template-rows, grid-area, gap	Pre 2‑rozmerné rozloženie s presnou kontrolou
Prechody a animácie	transition, animation, transform (rotate, scale, translate)	Používajte will-change pre výkon

---

8. Flexbox – rýchly návod

.container {
    display: flex;                /* alebo inline-flex */
    flex-direction: row;          /* row (default) alebo column */
    justify-content: space-between; /* horizontálne zarovnanie */
    align-items: center;          /* vertikálne zarovnanie */
    gap: 1rem;                    /* medzera medzi položkami */
}
.item {
    flex: 1 1 200px;  /* grow | shrink | basis */
}

Typické úlohy

Úloha	Flex nastavenie
Rovnomerné rozdelenie	flex: 1; pre všetky položky
Stredové zarovnanie	justify-content:center; align-items:center;
Vertikálny stack	flex-direction:column;

---

9. CSS Grid – rýchly návod

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 rovnakých stĺpcov */
    grid-template-rows: auto;
    gap: 20px;
}
.header { grid-column: 1 / -1; }          /* celá šírka */
.sidebar { grid-column: 1 / 4; }          /* 1‑3 */
.main   { grid-column: 4 / -1; }          /* 4‑12 */
.footer { grid-column: 1 / -1; }

Základné pojmy

• grid line – číselná (alebo pomenovaná) čiara, ktorou sú definované stĺpce/riadky
• grid cell – jedno políčko (priesečník riadka a stĺpca)
• grid area – väčšia plocha (napr. grid-column: 2 / 5;)

---

10. Responsívny dizajn

Media Queries

/* Mobil – max 480px */
@media (max-width: 480px) {
    .nav { flex-direction: column; }
}

/* Tablet – 481‑768px */
@media (min-width: 481px) and (max-width: 768px) {
    .grid { grid-template-columns: repeat(6, 1fr); }
}

/* Desktop – 769px a viac */
@media (min-width: 769px) {
    .grid { grid-template-columns: repeat(12, 1fr); }
}

Mobil‑prvý prístup (mobile‑first)

• Štýly pre základné (najmenšie) zariadenia píšte bez media query.
• Pre väčšie obrazovky používajte @media (min-width: …) – tak sa načítavajú len keď je to potrebné.

---

11. Praktické tipy a dobré praktiky

Tip	Prečo
Používajte logické názvy tried (.btn-primary, .card-header)	Zvyšuje čitateľnosť a údržbu
Rozdeľujte CSS do modulov (base.css, layout.css, components/*.css)	Ľahšie organizácia a caching
Minifikujte a kombinujte (style.min.css)	Rýchlejšie načítanie
Vyhnite sa zbytočnému !important	Udržateľnosť kódu
Testujte v rôznych prehliadačoch (Chrome, Firefox, Edge, Safari)	Zabezpečíte funkčnosť pre všetkých
Používajte moderné nástroje (PostCSS, SASS/SCSS, Tailwind)	Skracuje písanie a umožňuje pokročilé funkcie
Píšte fallbacky (napr. background: #ff6600; background: linear-gradient(...);)	Staršie prehliadače stále fungujú
Kontrolujte prístupnosť (color-contrast, :focus štýly)	Zlepšuje UX pre všetkých používateľov

---

12. Mini‑príklad – kompletná HTML + CSS stránka

<!DOCTYPE html>
<html lang="sk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ukážka CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <h1>Moja stránka</h1>
        <nav class="nav">
            <a href="#">Domov</a>
            <a href="#">O nás</a>
            <a href="#">Kontakt</a>
        </nav>
    </header>

    <main class="grid">
        <section class="card">
            <h2>Nadpis</h2>
            <p>Obsah karty.</p>
        </section>
        <section class="card">
            <h2>Ďalšia karta</h2>
            <p>Viac textu.</p>
        </section>
    </main>

    <footer class="site-footer">
        <p>&copy; 2026 Moja firma</p>
    </footer>
</body>
</html>

style.css

/* 1. Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 2. Základné štýly */
body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    background:#f9f9f9;
    color:#333;
}

/* 3. Header */
.site-header {
    background:#2c3e50;
    color:#fff;
    padding:1rem;
}
.site-header h1 { margin-bottom:.5rem; }
.nav a {
    color:#fff;
    margin-right:.8rem;
    text-decoration:none;
}
.nav a:hover { text-decoration:underline; }

/* 4. Grid layout */
.grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:1.5rem;
    padding:2rem;
}

/* 5. Karty */
.card {
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    padding:1rem;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.card h2 { margin-bottom:.5rem; }

/* 6. Footer */
.site-footer {
    text-align:center;
    padding:1rem;
    background:#2c3e50;
    color:#fff;
}

/* 7. Responsívny – mobilné menu */
@media (max-width: 480px) {
    .nav { display:flex; flex-direction:column; }
    .nav a { margin: .4rem 0; }
}

---

13. Ďalšie zdroje na prehĺbenie

Typ	Odkaz
Oficiálna dokumentácia	https://developer.mozilla.org/sk/docs/Web/CSS
Interaktívny kurz	https://www.codecademy.com/learn/learn-css
CSS Tricks (blog & príklady)	https://css-tricks.com/
Flexbox Guide	https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid Guide	https://css-tricks.com/snippets/css/complete-guide-grid/
W3Schools – CSS Reference	https://www.w3schools.com/css/

---

Zhrnutie

1. Selektory – určujú, čo štýlujete.
2. Kaskáda a špecifickosť – rozhodujú, ktoré pravidlo zvíťazí.
3. Box model – základ pre rozmery a rozmiestnenie.
4. Flexbox & Grid – moderné nástroje pre layout.
5. Responsívny dizajn – media queries a mobil‑prvý prístup.

[Autor]

Príspevky