2. Jak działają selektory i model pudełkowy

Nauczysz się precyzyjnie wybierać elementy i zrozumiesz, dlaczego każdy element to „pudełko”.

Podstawowe selektory

/* wszystko */
* { margin: 0; padding: 0; box-sizing: border-box; }

p { font-size: 1.1rem; }

.opis { color: #6c757d; }

#naglowek { text-align: center; }

.card p { margin-bottom: 1.25rem; }

nav > ul { list-style: none; padding: 0; }

a:hover { color: #0d6efd; }

Model pudełkowy (box model)

Content → Padding → Border → Margin

.kartka {
    width: 400px;
    padding: 24px;
    border: 2px solid #dee2e6;
    margin: 32px auto;
    background: white;
    box-sizing: border-box;
}

• * – selektor uniwersalny (wszystkie elementy na stronie)
• margin: 0; – usuwa domyślne marginesy zewnętrzne
• padding: 0; – usuwa domyślne odstępy wewnętrzne
• box-sizing: border-box; – szerokość i wysokość obejmuje padding + border (nie powiększa elementu)
• p – paragraf
• .opis – klasa (szary kolor tekstu)
• #naglowek – identyfikator (centrowanie tekstu)
• .card p – paragraf wewnątrz elementu z klasą .card
• nav > ul – bezpośrednia lista ul wewnątrz nav (bez punktorów i paddingu)
• a:hover – link w stanie najechania myszką
• width – szerokość elementu
• padding – odstęp wewnętrzny
• border – ramka
• margin – odstęp zewnętrzny
• margin: 32px auto; – 32px góra/dół + centrowanie w poziomie
• box-sizing: border-box; – szerokość zawiera padding i border

Zadanie

W pliku style.css:

• usuń kropki z list <ul> na całej stronie
• stwórz klasę .ramka (border + padding + tło jasne)
• wyśrodkuj główny kontener (.container { max-width: 960px; margin: 0 auto; })
• zmień kolor linków po najechaniu