CSS – stylizowanie strony internetowej

CSS (Cascading Style Sheets – “kaskadowe arkusze stylów”) to język służący do opisywania wyglądu elementów HTML. Dzięki niemu możesz kontrolować kolory, czcionki, odstępy, układy, animacje oraz całe kompozycje graficzne strony. CSS oddziela warstwę prezentacji od warstwy treści, co ułatwia zarządzanie wyglądem witryny.

Kolor tekstu: color: red; – zmienia barwę tekstu w elemencie.
Kolor tła: background-color: #f9f9f9; – określa kolor lub obraz tła.
Rozmiar czcionki: font-size: 20px; – definiuje wielkość tekstu.
Marginesy: margin: 20px; – tworzą odstęp na zewnątrz elementu.
Padding: padding: 10px; – dodaje odstęp wewnątrz elementu.
Obramowanie: border: 2px solid #ccc; – tworzy ramkę wokół elementu.
Wyśrodkowanie: text-align: center; – ustawia tekst w poziomie.
Zaokrąglenie rogów: border-radius: 8px; – nadaje bardziej miękki wygląd blokom.

Praktyczny przykład użycia CSS


<style>
    body { 
        font-family: Arial, sans-serif; 
        background:#f0f0f0; 
        margin:0;
        padding:20px;
    }

    p { 
        color: navy; 
        font-size: 19px; 
        line-height: 1.5;
    }

    header { 
        background:#dabc12; 
        padding:20px; 
        text-align:center; 
        border-radius:10px;
    }

    .box {
        background:white;
        padding:15px;
        margin-top:20px;
        border:1px solid #ddd;
        border-radius:8px;
    }
</style>

Możesz tworzyć własny plik style.css i podpiąć go w sekcji <head> swojej strony. Dzięki temu wszystkie style będą uporządkowane i łatwe do edytowania. CSS pozwala budować zarówno proste, jak i zaawansowane layouty, korzystając z takich narzędzi jak Flexbox czy Grid.


<!-- Podpięcie pliku zewnętrznego -->
<link rel="stylesheet" href="style.css">

--- Jeśli chcesz, mogę przygotować też wersję bardziej zaawansowaną — z Flexboxem, Gridem, animacjami albo ciemnym motywem.