Zadania na lekcje

Podstawy CSS - Selektory

HTML
Priorytet: Normalny Szkic

Zadanie 50: Podstawy CSS - Selektory i Stylizacja

Cel zadania

Nauczysz się tworzyć podstawową strukturę strony HTML, podpinać zewnętrzny arkusz stylów CSS oraz używać podstawowych selektorów do zmiany wyglądu elementów.

Część Teoretyczna

1. Tworzenie pliku HTML

Każda strona internetowa zaczyna się od pliku HTML (zazwyczaj index.html). Podstawowa struktura wygląda tak:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja Strona</title>
</head>
<body>
    <h1>Witaj świecie!</h1>
</body>
</html>

2. Podpinanie zewnętrznego stylu CSS

Aby oddzielić treść (HTML) od wyglądu (CSS), tworzymy osobny plik, np. style.css. Następnie musimy poinformować plik HTML, żeby z niego korzystał. Robimy to w sekcji <head> za pomocą znacznika <link>:

<head>
    <!-- ... inne znaczniki ... -->
    <link rel="stylesheet" href="style.css">
</head>

3. Selektory CSS (Jak wybierać elementy do stylizacji)

W pliku CSS piszemy reguły, które mówią: "znajdź ten element i zmień jego wygląd". Do znajdowania elementów służą selektory.

A. Selektor Znacznika (Tag Selector)

Działa na wszystkie elementy danego typu na stronie.

  • HTML: <p>To jest akapit.</p>
  • CSS: 
    p {
    color: red; /* Wszystkie akapity będą czerwone */
}

B. Selektor Klasy (Class Selector)

Działa na elementy, które mają nadaną konkretną klasę. Klasę możemy nadać wielu elementom. W CSS nazwę klasy poprzedzamy kropką (.).

  • HTML: <div class="wyroznione">To jest wyróżniony element.</div>
  • CSS: 
    .wyroznione {
    background-color: yellow; /* Tło żółte dla elementów z klasą "wyroznione" */
    font-weight: bold;
}

C. Selektor ID (ID Selector)

Działa na jeden, unikalny element na stronie. Każde ID może wystąpić tylko raz w dokumencie. W CSS nazwę ID poprzedzamy hashem (#).

  • HTML: <div id="naglowek-glowny">Tytuł strony</div>
  • CSS: 
    #naglowek-glowny {
    font-size: 24px;
    text-align: center;
}

Zadania do wykonania

Zadanie 1: Przygotowanie plików

  1. Utwórz plik index.html z podstawową strukturą.
  2. Utwórz plik style.css.
  3. Podepnij plik style.css do index.html (w sekcji <head>).

Zadanie 2: Struktura HTML

W pliku index.html w sekcji <body> dodaj:

  1. Nagłówek <h1> z tekstem "Moje pierwsze style".
  2. Dwa akapity <p> z dowolnym tekstem.
  3. Jeden element <div> z klasą box i tekstem "To jest pudełko".
  4. Jeden element <footer> z id stopka i tekstem "Copyright 2024".

Zadanie 3: Stylizacja (CSS)

W pliku style.css dopisz reguły:

  1. Selektor znacznika: Ustaw kolor tekstu wszystkich akapitów (p) na niebieski (blue).
  2. Selektor klasy: Ustaw tło (background-color) elementu z klasą .box na jasnoszare (lightgray) oraz dodaj obramowanie (border: 1px solid black;).
  3. Selektor ID: Ustaw kolor tekstu stopki (#stopka) na szary (gray) i wyśrodkuj go (text-align: center;).

Zadanie 4: Weryfikacja

Otwórz plik index.html w przeglądarce i sprawdź, czy style zostały poprawnie zaaplikowane.