Wprowadzenie do CSS

Czym jest CSS?

CSS (Cascading Style Sheets) to język służący do opisywania wyglądu elementów HTML. Dzięki CSS decydujesz między innymi o kolorach, czcionkach, odstępach, układzie sekcji i zachowaniu strony na różnych urządzeniach.

Skąd nazwa CSS?

Nazwa „Cascading Style Sheets” odnosi się do kaskadowości, czyli sposobu, w jaki przeglądarka rozstrzyga, które reguły stylów mają pierwszeństwo. Gdy kilka reguł dotyczy tego samego elementu, znaczenie ma m.in. specyficzność selektora i kolejność reguł.

Krótka historia CSS

Początki CSS sięgają lat 90., gdy strony internetowe stawały się coraz bardziej złożone wizualnie. W 1996 roku opublikowano CSS1 jako standard W3C. Kolejne wersje (CSS2, CSS3 i moduły rozwijane współcześnie) rozszerzały możliwości o layouty, animacje i responsywność.

Dlaczego CSS powstał?

Przed CSS projektanci stron często mieszali treść z prezentacją bezpośrednio w HTML. To utrudniało utrzymanie i rozwój projektów. CSS rozdzielił warstwy odpowiedzialności: treść (HTML) i wygląd (CSS), co znacząco uprościło pracę zespołów oraz skalowanie produktów.

Jak CSS współpracuje z HTML?

HTML tworzy elementy, takie jak nagłówki, akapity, listy i przyciski. CSS wybiera te elementy za pomocą selektorów i nadaje im style. Najczęściej CSS podłącza się jako osobny plik przez znacznik <link> w sekcji <head>.

Podstawowa składnia CSS

Reguła CSS składa się z selektora oraz bloku deklaracji. Każda deklaracja ma właściwość i wartość.

.card {
  background-color: #ffffff;
  color: #1f2937;
  padding: 1rem;
}

W tym przykładzie .card to selektor klasy, a w nawiasach klamrowych znajdują się właściwości opisujące wygląd.

Pierwszy przykład

Poniżej najprostsze połączenie HTML i CSS:

Kopiuj<h1 class="title">Witaj w CSS Academy</h1>

.title {
  color: #2563eb;
  font-size: 2rem;
  text-align: center;
}

Efekt: nagłówek staje się większy, wyśrodkowany i niebieski.

Mini zadanie

Utwórz prosty plik HTML z nagłówkiem i akapitem. Następnie w CSS:

• ustaw kolor nagłówka na granatowy,
• dodaj odstęp wewnętrzny do akapitu,
• zmień tło strony na jasnoszare.

Po wykonaniu porównaj efekt z celem: czy treść jest bardziej czytelna i uporządkowana wizualnie?

Podsumowanie lekcji

Wiesz już, czym jest CSS, skąd pochodzi jego nazwa i dlaczego stał się fundamentem nowoczesnego frontendu. Poznałeś podstawową składnię i pierwszy praktyczny przykład stylowania HTML.

Kolejny krok: naucz się selektorów oraz dziedziczenia, aby pisać style bardziej precyzyjnie i świadomie.