selektor {
    vlastnosť: hodnota;
    vlastnosť: hodnota;
}

/* Príklady: */
h1 {
    color: #2c3e50;        /* farba textu */
    font-size: 2rem;       /* veľkosť písma */
}

p {
    margin-bottom: 1rem;   /* vonkajší okraj dole */
    line-height: 1.6;      /* výška riadku */
}

table {
    width: 100%;           /* šírka tabuľky */
    border-collapse: collapse; /* zlúčenie ohraničení buniek */
}

ul {
    list-style-type: disc; /* typ odrážky: disc, circle, square, none */
    padding-left: 1.5rem;  /* odsadenie zoznamu */
}

div {
    margin: 20px;           /* vonkajší okraj zo všetkých strán */
    margin-top: 10px;       /* len zhora */
    margin: 10px 20px;      /* hore+dole  |  vľavo+vpravo */
    margin: 10px 20px 15px 5px; /* hore | vpravo | dole | vľavo (po hodinách) */

    padding: 15px;          /* vnútorný okraj — rovnaká logika ako margin */

    border: 1px solid #ccc; /* hrúbka | štýl | farba */
    border-radius: 8px;     /* zaoblenie rohov */
}

<!-- Základná Bootstrap navigácia -->
<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Môj web</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#sekcia1">Sekcia 1</a></li>
                <li class="nav-item"><a class="nav-link" href="#sekcia2">Sekcia 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#sekcia3">Sekcia 3</a></li>
            </ul>
        </div>
    </div>
</nav>

1. Otvor stránku v prehliadači Chrome alebo Edge
2. Stlač Ctrl + Shift + I  (alebo F12 — na niektorých notebookoch Fn + F12)
3. Klikni na ikonku  🖥️📱  vľavo hore v DevTools — vyzerá ako tablet s telefónom
4. V rozbaľovacom zozname vyber zariadenie:
   → iPhone SE, iPhone 14, Samsung Galaxy, iPad...
5. Obnov stránku — F5

Tradičný prístup (desktop-first):
  Napíšem CSS pre veľký monitor → potom zmenšujem pre tablet → potom pre mobil
  Problém: na mobile to vyzerá ako zmenšená desktopová stránka

Mobile-first prístup:
  Napíšem CSS pre mobil → potom rozširujem pre tablet → potom pre monitor
  Výsledok: na každom zariadení stránka vyzerá prirodzene

/* Mobile-first — základ platí pre mobil */
.container {
    padding: 10px;      /* na mobile — malý padding */
    font-size: 14px;
}

/* Tablet a väčšie — rozšírime */
@media (min-width: 768px) {
    .container {
        padding: 20px;  /* na tablete — väčší padding */
        font-size: 16px;
    }
}

/* Monitor — ešte väčšie */
@media (min-width: 992px) {
    .container {
        padding: 40px;
        font-size: 18px;
    }
}

/* Všeobecný zápis */
@media (podmienka) {
    /* CSS pravidlá ktoré platia len keď je podmienka splnená */
}

/* Príklady podmienok: */
@media (max-width: 576px)  { /* len pre mobil — užšie ako 576px */ }
@media (min-width: 768px)  { /* tablet a väčšie — širšie ako 768px */ }
@media (min-width: 992px)  { /* laptop a väčšie */ }
@media (min-width: 1200px) { /* veľký monitor */ }

/* Aktivujeme Flexbox na rodičovskom prvku */
.rodic {
    display: flex;
}

/* Smer — riadok (default) alebo stĺpec */
flex-direction: row;      /* deti vedľa seba → (default) */
flex-direction: column;   /* deti pod sebou ↓ */

/* Zarovnanie po hlavnej osi (horizontálne ak row) */
justify-content: flex-start;    /* zarovnať vľavo (default) */
justify-content: flex-end;      /* zarovnať vpravo */
justify-content: center;        /* vycentrovať */
justify-content: space-between; /* rovnomerne — prvý vľavo, posledný vpravo */
justify-content: space-around;  /* rovnomerne — s okrajmi */

/* Zarovnanie po vedľajšej osi (vertikálne ak row) */
align-items: flex-start;  /* zarovnať hore */
align-items: flex-end;    /* zarovnať dole */
align-items: center;      /* vertikálne vycentrovať */
align-items: stretch;     /* natiahnuť na výšku rodiča (default) */

/* Zalamovanie — ak sa deti nezmestia na jeden riadok */
flex-wrap: nowrap;  /* nezalamuj (default) */
flex-wrap: wrap;    /* zalomí na ďalší riadok */

<form action="#" method="post">

    <label for="meno">Meno:</label>
    <input type="text" id="meno" name="meno" required minlength="2">

    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>

    <label for="sprava">Správa:</label>
    <textarea id="sprava" name="sprava" rows="4" required></textarea>

    <label for="tema">Téma:</label>
    <select id="tema" name="tema">
        <option value="">-- Vyber tému --</option>
        <option value="otazka">Otázka</option>
        <option value="problem">Problém</option>
        <option value="ine">Iné</option>
    </select>

    <button type="submit">Odoslať</button>

</form>

<form action="#" method="post">

    <fieldset>
        <legend>Osobné údaje</legend>

        <label for="meno">Meno:</label>
        <input type="text" id="meno" name="meno" required>

        <label for="vek">Vek:</label>
        <input type="number" id="vek" name="vek" min="1" max="120">
    </fieldset>

    <fieldset>
        <legend>Kontaktné údaje</legend>

        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" required>

        <label for="tel">Telefón:</label>
        <input type="tel" id="tel" name="tel" pattern="[0-9]{9,10}">
    </fieldset>

    <button type="submit">Odoslať</button>

</form>

<form action="#" method="post">

    <fieldset class="border rounded p-3 mb-3">
        <legend class="float-none w-auto px-2 fs-6">Osobné údaje</legend>

        <div class="mb-3">
            <label for="meno" class="form-label">Meno *</label>
            <input type="text" class="form-control" id="meno"
                   name="meno" required minlength="2"
                   placeholder="Zadaj meno">
        </div>

        <div class="mb-3">
            <label for="email" class="form-label">E-mail *</label>
            <input type="email" class="form-control" id="email"
                   name="email" required
                   placeholder="meno@domena.sk">
        </div>

        <div class="mb-3">
            <label for="tel" class="form-label">Telefón</label>
            <input type="tel" class="form-control" id="tel"
                   name="tel" pattern="[0-9]{9,10}"
                   placeholder="0901234567">
        </div>
    </fieldset>

    <fieldset class="border rounded p-3 mb-3">
        <legend class="float-none w-auto px-2 fs-6">Správa</legend>

        <div class="mb-3">
            <label for="tema" class="form-label">Téma</label>
            <select class="form-select" id="tema" name="tema">
                <option value="">-- Vyber tému --</option>
                <option value="otazka">Otázka</option>
                <option value="problem">Problém</option>
                <option value="ine">Iné</option>
            </select>
        </div>

        <div class="mb-3">
            <label for="sprava" class="form-label">Správa *</label>
            <textarea class="form-control" id="sprava"
                      name="sprava" rows="4" required
                      minlength="10"></textarea>
        </div>

        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       id="suhlas" name="suhlas" required>
                <label class="form-check-label" for="suhlas">
                    Súhlasím so spracovaním osobných údajov *
                </label>
            </div>
        </div>
    </fieldset>

    <button type="submit" class="btn btn-primary">Odoslať</button>

</form>

/* Fokus — modré ohraničenie keď je pole aktívne */
.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Platná hodnota — zelené ohraničenie */
.form-control:valid {
    border-color: #198754;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23198754' d='M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

/* Neplatná hodnota — červené ohraničenie
   :not(:focus) — nezobrazí sa kým je pole aktívne
   :not(:placeholder-shown) — nezobrazí sa kým je pole prázdne */
.form-control:not(:focus):not(:placeholder-shown):invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23dc3545' d='M6 0a6 6 0 100 12A6 6 0 006 0zm0 10.5a.75.75 0 110-1.5.75.75 0 010 1.5zm.75-3.75a.75.75 0 01-1.5 0v-3a.75.75 0 011.5 0v3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

/* Pomocný text pod poľom — zobrazí sa len keď je hodnota neplatná */
.form-control:not(:focus):not(:placeholder-shown):invalid ~ .invalid-hint {
    display: block;
}

.invalid-hint {
    display: none;
    font-size: 0.85rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

<!-- Použitie invalid-hint v HTML -->
<div class="mb-3">
    <label for="tel" class="form-label">Telefón</label>
    <input type="tel" class="form-control" id="tel"
           name="tel" pattern="[0-9]{9,10}"
           placeholder="0901234567">
    <span class="invalid-hint">Zadaj 9 až 10 číslic bez medzier.</span>
</div>

<!-- Tlačidlo ktoré otvorí modal -->
<button type="button" class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#mojModal">
    Otvoriť detail
</button>

<!-- Samotný modal — môže byť kdekoľvek v body -->
<div class="modal fade" id="mojModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Názov modalu</h5>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <p>Obsah modalu — text, obrázok, formulár...</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">Zatvoriť</button>
                <button type="button" class="btn btn-primary">Uložiť</button>
            </div>

        </div>
    </div>
</div>

<div id="mojCarousel" class="carousel slide" data-bs-ride="carousel">

    <!-- Bodky — navigácia -->
    <div class="carousel-indicators">
        <button data-bs-target="#mojCarousel" data-bs-slide-to="0"
                class="active"></button>
        <button data-bs-target="#mojCarousel" data-bs-slide-to="1"></button>
        <button data-bs-target="#mojCarousel" data-bs-slide-to="2"></button>
    </div>

    <!-- Obrázky -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/foto1.jpg" class="d-block w-100" alt="Popis 1">
            <div class="carousel-caption">
                <h5>Nadpis 1</h5>
                <p>Popis obrázka</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/foto2.jpg" class="d-block w-100" alt="Popis 2">
        </div>
        <div class="carousel-item">
            <img src="img/foto3.jpg" class="d-block w-100" alt="Popis 3">
        </div>
    </div>

    <!-- Šípky -->
    <button class="carousel-control-prev" data-bs-target="#mojCarousel"
            data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" data-bs-target="#mojCarousel"
            data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>

</div>

<div class="accordion" id="mojAccordion">

    <!-- Položka 1 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#polozka1">
                Otázka číslo 1
            </button>
        </h2>
        <div id="polozka1" class="accordion-collapse collapse show"
             data-bs-parent="#mojAccordion">
            <div class="accordion-body">
                Odpoveď na otázku číslo 1.
            </div>
        </div>
    </div>

    <!-- Položka 2 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#polozka2">
                Otázka číslo 2
            </button>
        </h2>
        <div id="polozka2" class="accordion-collapse collapse"
             data-bs-parent="#mojAccordion">
            <div class="accordion-body">
                Odpoveď na otázku číslo 2.
            </div>
        </div>
    </div>

</div>

<!-- Tlačidlo ktoré zobrazí toast -->
<button type="button" class="btn btn-success" id="zobrazToast">
    Odoslať formulár
</button>

<!-- Toast — zvyčajne v rohu obrazovky -->
<div class="position-fixed bottom-0 end-0 p-3">
    <div id="mojToast" class="toast align-items-center text-bg-success"
         role="alert">
        <div class="d-flex">
            <div class="toast-body">
                ✅ Formulár bol úspešne odoslaný!
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto"
                    data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

// JavaScript — jeden riadok na zobrazenie toastu
const toastEl  = document.getElementById('mojToast');
const toast    = new bootstrap.Toast(toastEl);
const tlacidlo = document.getElementById('zobrazToast');

tlacidlo.addEventListener('click', function() {
    toast.show();
});

<!-- Karta s odznakom v rohu — position-relative + position-absolute -->
<div class="card shadow position-relative" style="width: 18rem">
    <span class="badge bg-danger position-absolute top-0 end-0 m-2">
        Novinka
    </span>
    <div class="ratio ratio-16x9 overflow-hidden">
        <img src="img/foto.jpg" class="object-fit-cover w-100 h-100" alt="Foto">
    </div>
    <div class="card-body">
        <h5 class="card-title">Názov karty</h5>
        <p class="card-text">Popis karty.</p>
        <a href="#" class="btn btn-primary">Detail</a>
    </div>
</div>

/* Plynulý prechod pri hover — transition */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);       /* posunie kartu o 5px nahor */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* CSS premenné — prepíšeme Bootstrap farby */
:root {
    --bs-primary: #2e7d32;        /* zelená namiesto modrej */
    --bs-primary-rgb: 46, 125, 50;
}

/* Jednoduchá animácia — fadeIn pri načítaní */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animovany {
    animation: fadeIn 0.6s ease forwards;
}

/* Oneskorenie pre každú kartu — efekt postupného objavenia */
.animovany:nth-child(1) { animation-delay: 0.1s; }
.animovany:nth-child(2) { animation-delay: 0.2s; }
.animovany:nth-child(3) { animation-delay: 0.3s; }