Zadanie 3: Kolory i Styl (Wstęp do CSS)

Wstęp

Sam HTML to tylko struktura - jak szkielet budynku. Aby dom wyglądał pięknie, potrzebuje farby, okładzin i dekoracji. W świecie stron WWW rolę tę pełni CSS (Cascading Style Sheets - Kaskadowe Arkusze Stylów).

To dzięki CSS sprawisz, że tekst będzie czerwony, tło czarne, a obrazki zaokrąglone.

Cel zadania

Stworzenie strony "Portfolio", która wykorzystuje style CSS do zmiany kolorów tekstu i tła, nadając stronie unikalny charakter.

Jak dodawać style?

W tym zadaniu poznamy dwie metody:

1. Styl lokalny (Inline CSS)

Dodajemy atrybut style bezpośrednio do znacznika. Działa tylko na ten jeden konkretny element.

<p style="color: red;">Ten tekst jest czerwony.</p>
<h1 style="background-color: yellow;">Nagłówek na żółtym tle.</h1>

2. Styl w nagłówku (Internal CSS)

W sekcji <head> tworzymy znacznik <style>. To lepsza metoda, bo oddziela treść od wyglądu.

<head>
    <style>
        body {
            background-color: lightblue; /* Tło całej strony */
        }
        h1 {
            color: white; /* Wszystkie nagłówki h1 będą białe */
            background-color: navy;
        }
        p {
            color: darkblue;
        }
    </style>
</head>

Kolory w CSS

Kolory możemy podawać na kilka sposobów:

Nazwy angielskie: red, green, blue, black, white, gold, tomato, skyblue itp.
Kody szesnastkowe (HEX): #RRGGBB (Red, Green, Blue). Np. #FF0000 to czerwony, #000000 to czarny, #FFFFFF to biały.

Przydatne właściwości:

color: zmienia kolor tekstu.
background-color: zmienia kolor tła elementu.

Zadanie do wykonania

Utwórz folder zadanie3 i plik portfolio.html.
Stwórz strukturę HTML5.
Zaprojektuj stronę - swoje Portfolio.
Strona musi zawierać sekcje (użyj nagłówków <h2>):
- O mnie: krótki opis kim jesteś.
- Umiejętności: lista punktowana (<ul>) co potrafisz.
- Kontakt: np. fikcyjny email.
Wymagania stylowe (CSS):
- Ustaw kolor tła całej strony na jakiś jasny, przyjemny kolor (np. beige, azure lub jasny szary #f0f0f0). Użyj do tego sekcji <style> w <head>.
- Zmień kolor głównego nagłówka (<h1> z Twoim imieniem) na wyrazisty kolor.
- Użyj innego koloru tła dla sekcji "Umiejętności" (możesz objąć ją znacznikiem <div> lub nadać style bezpośrednio liście <ul>).
- Przynajmniej jeden element na stronie musi mieć styl nadany metodą inline (style="..."), np. "To jest moje najlepsze dzieło" z wyróżnionym słowem.

Podpowiedź

Twój plik może wyglądać mniej więcej tak:

<!DOCTYPE html>
<html>
<head>
    <title>Portfolio Jana</title>
    <style>
        body {
            background-color: #f4f4f9;
            font-family: Arial, sans-serif; /* Dodatkowo: zmiana czcionki */
        }
        h1 {
            color: darkslate_blue;
        }
        .sekcja-umiejetnosci {
            background-color: white;
            padding: 10px; /* Odstęp wewnętrzny */
        }
    </style>
</head>
<body>
    <h1>Jan Kowalski - Web Developer</h1>
    
    <h2>O mnie</h2>
    <p>Uczę się tworzyć strony WWW.</p>

    <h2 style="color: tomato;">Umiejętności</h2>
    <ul class="sekcja-umiejetnosci">
        <li>HTML</li>
        <li>CSS (podstawy)</li>
    </ul>
</body>
</html>

HTML & CSS: Kolory i Styl