Dodanie kolorów, czcionek, układu strony

Twoja strona wizytówka ma już strukturę HTML – teraz pora na stylizację, czyli nadanie jej charakteru 🎨

Dzięki CSS możesz zmienić wygląd każdego elementu: dodać kolory, ustawić czcionki, ułożyć sekcje w kolumnach i zadbać o przejrzystość strony.

W tej lekcji nauczysz się jak:

✅ dobrać kolorystykę pasującą do Twojej tematyki
✅ wybrać estetyczne czcionki i ustawić ich rozmiar
✅ ustawić układ elementów – np. bloki obok siebie

🎨 Kolorystyka strony

Zacznij od tła nagłówka, tekstów i stopki. Przykładowe style w pliku style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  color: #333;
}

header {
  background-color: #1e90ff;
  color: white;
  padding: 20px;
  text-align: center;
}

footer {
  background-color: #222;
  color: white;
  padding: 10px;
  text-align: center;
}

Kolory możesz dobrać samodzielnie lub skorzystać z palet kolorów np. coolors.co

🔤 Czcionki i ich rozmiar

Ustaw czcionkę dla całej strony i dopasuj rozmiar nagłówków i paragrafów:

h1 {
  font-size: 32px;
  font-weight: bold;
}

h2 {
  font-size: 24px;
  color: #1e90ff;
}

p {
  font-size: 16px;
  line-height: 1.6;
}

Chcesz użyć czcionki z Google Fonts (np. „Poppins”)? Wklej link w sekcji <head> pliku HTML:

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

A potem w CSS:

body {
  font-family: 'Poppins', sans-serif;
}

📐 Układ bloków – ustawianie obok siebie

Twoja strona może mieć np. 3 bloki z ofertą obok siebie. Ustaw je jako inline-block lub użyj flexbox:

<section class="oferty">
  <div class="blok">
    <h3>Strony WWW</h3>
    <p>Nowoczesne strony dla firm i freelancerów.</p>
  </div>
  <div class="blok">
    <h3>Sklepy online</h3>
    <p>Responsywne i szybkie sklepy e-commerce.</p>
  </div>
  <div class="blok">
    <h3>Pozycjonowanie</h3>
    <p>Zadbaj o widoczność swojej strony w Google.</p>
  </div>
</section>

W CSS:

.oferty {
  display: flex;
  gap: 20px;
  padding: 20px;
  justify-content: space-around;
  flex-wrap: wrap;
}

.blok {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

📌 Efekt działania

Po zapisaniu zmian, otwórz plik index.html w przeglądarce lub kliknij Run w JSFiddle. Zobaczysz już estetyczny układ z kolorami, czcionkami i blokami obok siebie 🎉

To dopiero początek – wygląd strony możesz dowolnie dopracowywać!

📚 Nie pamiętasz jak coś zrobić?

Nie martw się – możesz zawsze wrócić do wcześniejszych lekcji:

🎨 Moduł 3 – właściwości CSS (kolory, czcionki, marginesy)
🧱 Moduł 2 – struktura HTML

✅ Podsumowanie

Ustawiłeś kolory, czcionki i wygląd podstawowych sekcji strony
Stworzyłeś układ bloków z ofertą – obok siebie lub w kolumnach
Twoja strona wygląda już jak prawdziwa wizytówka!

➡️ W kolejnym temacie nauczysz się, jak dostosować stronę do różnych rozdzielczości – czyli zrobić ją responsywną 📱💻

Previous Zagadnienie

Back to Zagadnienie

Next Temat