Klasy i identyfikatory

Lekcja: Klasy i Identyfikatory w CSS

Cel lekcji:

  • Zrozumienie różnicy między klasami i identyfikatorami w CSS.
  • Nauka stosowania klas i identyfikatorów do stylowania elementów HTML.
  • Wykorzystanie zaawansowanych właściwości CSS w praktyce.

Teoria

CSS umożliwia stylizowanie elementów HTML za pomocą:

  1. Klas (class):

    • Klasy są definiowane w HTML za pomocą atrybutu class.
    • Mogą być stosowane wielokrotnie do różnych elementów.
    • W CSS klasy oznaczamy kropką przed nazwą: 
      .nazwa-klasy {
  color: blue;
}

  2. Identyfikatorów (id):

    • Identyfikatory są definiowane w HTML za pomocą atrybutu id.
    • Są unikalne — na stronie każdy identyfikator powinien być przypisany tylko jednemu elementowi.
    • W CSS identyfikatory oznaczamy znakiem # przed nazwą: 
      #unikalny-id {
  background-color: yellow;
}

Dodatkowe materiały:

Ćwiczenia

Ćwiczenie 1: Klasy a identyfikatory – formatowanie nagłówków

  • Stwórz trzy różne nagłówki <h1> z przypisanymi klasami: .blue-title, .red-title, .green-title.
  • Dla każdej klasy ustaw inne:
    • Kolor tekstu (color)
    • Czcionkę (font-family)
    • Rozmiar tekstu (font-size)
  • Dodaj jeden nagłówek z id="highlight" i ustaw dla niego dodatkowe tło (background-color) oraz podkreślenie tekstu (text-decoration).

Ćwiczenie 2: Stylizowanie za pomocą wielu klas

  • Utwórz paragraf <p> i przypisz mu dwie klasy: .bordered i .text-center.
  • Stylizacje:
    • .bordered: obramowanie (border), zaokrąglone rogi (border-radius), cień (box-shadow).
    • .text-center: wyrównanie tekstu (text-align) i kolor czcionki (color).

Do sprawdzenia: Box Shadow – W3C

Ćwiczenie 3: Klasy globalne i lokalne

  • W dokumencie HTML:
    • Utwórz sekcję <section> z klasą .global-section.
    • Wewnątrz sekcji umieść element <div> z klasą .local-box.
  • Stylizacje:
    • .global-section: kolor tła (background-color), marginesy (margin), szerokość (width).
    • .local-box: inny kolor tła, wewnętrzny odstęp (padding), szerokość mniejsza od rodzica (max-width).

Ćwiczenie 4: Kombinacja klas i identyfikatorów

  • W dokumencie dodaj dwa paragrafy <p> z tą samą klasą .info, ale różnymi identyfikatorami: id="first-info" i id="second-info".
  • Stylizacje:
    • .info: kolor czcionki, interlinia (line-height), rodzaj czcionki.
    • #first-info: dodatkowo większy rozmiar czcionki (font-size).
    • #second-info: cień tekstu (text-shadow).

Do sprawdzenia: Text Shadow – W3C

Ćwiczenie 5: Responsywne obrazy z klasami

  • Utwórz dwa obrazy <img>: jeden z klasą .responsive-img, drugi z klasą .thumbnail.
  • Stylizacje:
    • .responsive-img: szerokość (width) ustawiona na 100%, aby obraz dostosowywał się do szerokości okna.
    • .thumbnail: obramowanie, margines wewnętrzny, i ustawiona stała szerokość (max-width).

Do sprawdzenia: Background Image – W3C

Ćwiczenie 6: Listy z różnymi klasami

  • Stwórz listę <ul> z klasą .styled-list, zawierającą elementy <li> z różnymi dodatkowymi klasami .bold, .italic, .highlighted.
  • Stylizacje:
    • .styled-list: marginesy zewnętrzne (margin), odstępy między elementami (padding).
    • .bold: pogrubienie tekstu (font-weight).
    • .italic: pochylony tekst (font-style).
    • .highlighted: tło dla tekstu.

Do sprawdzenia: Font Style – W3C

Ćwiczenie 7: Menu nawigacyjne

  • Stwórz poziome menu <nav> zawierające listę <ul> z linkami <a> do stron.
  • Klasy:
    • .menu: ustawienie display: flex, odstępy między elementami (gap).
    • .menu-item: kolor tekstu, zmiana koloru po najechaniu (:hover) oraz styl krawędzi (border-bottom).

Do sprawdzenia: Flexbox – W3C

Ćwiczenie 8: Formularz złożony z klas i ID

  • Utwórz formularz <form> zawierający pola z różnymi klasami, np. .input-text, .input-email, .input-submit.
  • Stylizacje:
    • Wszystkie pola .input-text i .input-email: szerokość, marginesy, kolor obramowania.
    • Pole .input-submit: kolor tła, kolor tekstu, efekt zmiany wyglądu po najechaniu (:hover).
    • Formularz jako całość: obramowanie i zaokrąglenie rogów.

Do sprawdzenia: CSS Forms – W3C

Podsumowanie

Dzięki klasom i identyfikatorom CSS możesz precyzyjnie kontrolować stylizację poszczególnych elementów HTML. Umiejętne wykorzystanie tych mechanizmów pozwala na tworzenie zaawansowanych i responsywnych projektów stron internetowych. Regularne ćwiczenia pomogą Ci opanować różnorodne właściwości CSS i stosowanie ich w praktyce.