Rozszerzenia – responsywność, pseudo-klasy, import czcionek i poprawność dostępności.

✅ 1. Responsywność (@media)

Responsywność polega na dostosowaniu wyglądu strony do szerokości urządzenia — np. telefonów.

👉 Przykład: zmniejszenie czcionki na ekranach poniżej 600 px

@media (max-width: 600px) {
.container {
padding: 10px;
}
}

✅ 2. Pseudo-klasy: :hover

Pseudo-klasa :hover zmienia wygląd elementu, kiedy użytkownik najeżdża myszką.

👉 Przykład dla .highlight:hover

.highlight {
background-color: #e0f7fa;
padding: 10px;
border-left: 4px solid #007f9a;
}

/* Efekt po najechaniu myszką */
.highlight:hover {
background-color: #c3eff3;
border-left-color: #005f6a;
}

Efekt: cytat „podświetla się”, gdy nad nim jest kursor.

Lub w HTML:

<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>

Czcionkę możesz przypisać tylko wybranym elementom — np. .welcome-text.

✅ 4. Dekoracje tekstu (text-decoration)

Służą do dodawania podkreśleń, linii przez tekst, nadkreśleń itp.

👉 Przykład:

.title {
text-decoration: underline;
}

.deleted {
text-decoration: line-through;
}

.link {
text-decoration: none; /* usunięcie podkreślenia */
}

Można używać też nowoczesnej składni:

.title {
text-decoration: underline wavy red;
}

✅ 5. Kontrast kolorów (dostępność)

Aby tekst był czytelny, kolor tekstu i tła muszą się wyraźnie różnić.

👉 Przykład słabego kontrastu (zły):

.bad {
color: #777;
background-color: #888;
}

👉 Przykład dobrego kontrastu (dobry):

.good {
color: #000000;
background-color: #ffffff;
}

Lub:

.good2 {
color: #0b2e59; /* ciemny niebieski */
background-color: #e4f1ff; /* bardzo jasny niebieski */
}

Dla standardu WCAG minimalny kontrast to 4.5:1 (zwykły tekst).

Można sprawdzić kontrast np. tu:
🔎 „contrast checker” – narzędzia online (np. WebAIM Contrast Checker)

🎁 Przykład łączony – wszystkie zagadnienia w jednym projekcie

/* Import czcionki */
@import url(’https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap’);

/* Tekst powitalny */
.welcome-text {
font-family: 'Roboto’, sans-serif;
font-size: 18px;
color: #1d1d1d;
}

/* Mała nota */
.small-note {
font-size: 0.8em;
color: #555;
text-decoration: underline;
}

/* Cytat */
.highlight {
background-color: #e0f7fa;
padding: 12px;
border-left: 4px solid #007f9a;
color: #003f4a;
}

/* Efekt hover */
.highlight:hover {
background-color: #c3eff3;
border-left-color: #005f6a;
}

/* Responsywność */
@media (max-width: 600px) {
.welcome-text {
font-size: 15px;
}

.highlight {
font-size: 16px;
padding: 8px;
}
}