CSS - przypomnienie i rozszerzenie

CSS (Cascading Style Sheets) odpowiada za wyglad strony. Dzis skupimy sie na technikach, ktore pozwola stworzyc nowoczesna, atrakcyjna strone.

CSS Box Model

Kazdy element HTML to "pudelko" skladajace sie z:

/* Content -> Padding -> Border -> Margin */
.box {
    width: 300px;
    padding: 20px;        /* przestrzen wewnetrzna */
    border: 2px solid #333; /* obramowanie */
    margin: 10px;         /* przestrzen zewnetrzna */
    box-sizing: border-box; /* width zawiera padding i border */
}

Flexbox - uklad elastyczny

Flexbox to nowoczesny sposob ukladania elementow w wierszu lub kolumnie:

/* Kontener flex */
.navbar {
    display: flex;
    justify-content: space-between; /* rozlozenie w poziomie */
    align-items: center;            /* wyrownanie w pionie */
    gap: 20px;                      /* odstep miedzy elementami */
}

/* Siatka kart */
.cards {
    display: flex;
    flex-wrap: wrap;          /* zawijanie do nowego wiersza */
    gap: 20px;
}

.card {
    flex: 1 1 300px;          /* rosnie, kurczy sie, min. 300px */
}

Responsywnosc - Media Queries

Strona powinna dobrze wygladac na kazdym urzadzeniu:

/* Domyslnie - desktop */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tablet */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
    .cards {
        grid-template-columns: 1fr;
    }
}

/* Telefon */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .hero h1 { font-size: 1.5rem; }
}

Kolorystyka i typografia

:root {
    --primary: #2563eb;     /* kolor glowny */
    --secondary: #64748b;   /* kolor pomocniczy */
    --bg: #f8fafc;          /* tlo */
    --text: #1e293b;        /* tekst */
}

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.6;
}

h1, h2, h3 {
    color: var(--primary);
    margin-bottom: 0.5em;
}