Strona może mieć poprawny HTML, a mimo to wyglądać jak surowy dokument bez kolorów, odstępów i układu. Żeby temu zaradzić, trzeba połączyć strukturę HTML z arkuszem stylów CSS. Pokażę najprostszy sposób, trzy dostępne metody, poprawne ścieżki do plików oraz błędy, przez które stylowanie często nie działa.

Jak połączyć CSS z HTML w najprostszy sposób

Najczęściej tworzę dwa osobne pliki: index.html z treścią strony oraz style.css z jej wyglądem. Dzięki temu struktura i prezentacja nie mieszają się ze sobą, a ten sam arkusz można później wykorzystać na wielu podstronach.

Przykładowa struktura projektu może wyglądać tak:

projekt/
├── index.html
└── style.css

W pliku HTML, wewnątrz elementu , dodajemy odwołanie do arkusza:

  
  
  
  


  
Witaj na stronie
  
To jest przykładowy tekst.

Plik CSS może zawierać proste reguły:

body {
  background-color: #f4f4f4;
  color: #222;
  font-family: Arial, sans-serif;
}

h1 {
  color: #1769aa;
}

p {
  font-size: 18px;
}

Atrybut rel="stylesheet" informuje przeglądarkę, że wskazany zasób jest arkuszem stylów, a href="style.css" podaje jego lokalizację. Nie trzeba dodawać atrybutu type="text/css", ponieważ współczesny HTML domyślnie rozpoznaje arkusze CSS.

Trzy sposoby dodawania CSS i wybór właściwego

CSS można połączyć z HTML na trzy sposoby. Każdy działa, ale nie każdy sprawdza się równie dobrze w większym projekcie.

Osobny plik CSS

To rozwiązanie wybieram niemal zawsze, gdy strona ma więcej niż kilka elementów. Kod jest łatwiejszy do utrzymania, a zmiana jednego selektora może wpłynąć na wiele podstron. Przeglądarka może też przechowywać arkusz w pamięci podręcznej, co ogranicza konieczność pobierania go przy każdej odsłonie.

Style wewnętrzne

Reguły można umieścić bezpośrednio w sekcji :

Ta metoda jest wygodna podczas nauki albo prototypowania. W praktyce szybko robi się nieporęczna, gdy dokument rośnie, ponieważ HTML zaczyna zawierać zarówno treść, jak i dużą ilość kodu odpowiedzialnego za wygląd.

Style inline

Styl można przypisać konkretnemu elementowi:

  Ważny komunikat

To działa, lecz używam tej techniki oszczędnie. Style inline mają wysoką szczegółowość i później potrafią utrudniać nadpisywanie reguł. Do stałego wyglądu przycisków, nagłówków czy sekcji lepsza będzie klasa CSS.

Ścieżka do pliku CSS decyduje o wyniku

Wiele problemów nie wynika z samego CSS, tylko z błędnej ścieżki w atrybucie href. Przeglądarka szuka pliku względem lokalizacji dokumentu HTML, dlatego układ folderów ma bezpośrednie znaczenie.

Pliki w tym samym folderze

projekt/
├── index.html
└── style.css

Arkusz w podfolderze

projekt/
├── index.html
└── css/
    └── style.css

HTML w podfolderze

projekt/
├── css/
│   └── style.css
└── pages/
    └── kontakt.html

W pliku kontakt.html trzeba cofnąć się o jeden poziom:

Dwie kropki oznaczają przejście do folderu nadrzędnego. Najczęstszy błąd to wpisanie ścieżki poprawnej dla index.html w innym dokumencie, który znajduje się w podfolderze. Gdy styl nie działa, sprawdzam ścieżkę względem konkretnego pliku HTML, a nie względem całego projektu.

Dlaczego CSS nie działa mimo poprawnego połączenia

Samo dodanie elementu nie gwarantuje widocznego efektu. CSS musi jeszcze trafić w odpowiedni element, a reguła nie może zostać nadpisana przez inną o większym priorytecie.

Niepasujący selektor

Jeśli HTML zawiera klasę button-primary, a CSS odwołuje się do .primary-button, przeglądarka nie połączy tych zapisów:

Wyślij

.primary-button {
  background-color: blue;
}

Poprawny selektor powinien odpowiadać nazwie klasy:

.button-primary {
  background-color: blue;
  color: white;
}

Nieprawidłowa składnia

Każda reguła CSS składa się z selektora, właściwości i wartości. Brak średnika nie zawsze powoduje problem, ale brak klamry albo dwukropka może unieważnić fragment kodu.

/* Poprawnie */
.card {
  padding: 20px;
  border: 1px solid #ddd;
}

/* Błędnie */
.card {
  padding 20px;
  border: 1px solid #ddd;
}

Przeczytaj również: Instrukcja `switch` w C#: Potężny odpowiednik `select case`

Kolejność i szczegółowość reguł

Jeśli dwa selektory ustawiają tę samą właściwość, znaczenie ma ich szczegółowość oraz kolejność. Reguła dla identyfikatora zwykle wygra z regułą dla klasy, a styl inline będzie jeszcze silniejszy.

p {
  color: black;
}

.article-text {
  color: navy;
}

#intro {
  color: darkred;
}

Przy debugowaniu otwieram narzędzia deweloperskie przeglądarki i sprawdzam zakładkę z regułami CSS. Przekreślona właściwość zwykle oznacza, że została nadpisana przez inną regułę, a nie że arkusz w ogóle się nie załadował.

Dobre praktyki, które oszczędzają czas

Połączenie HTML i CSS jest proste, ale kilka nawyków od początku ułatwia rozwój projektu. Nadaję plikom czytelne nazwy, trzymam arkusze w osobnym folderze i używam klas opisujących przeznaczenie elementu, na przykład .menu-item albo .product-card.

Nie styluję wszystkiego za pomocą selektora typu div. Taki zapis może przypadkowo zmienić wygląd wielu niezależnych sekcji. Klasy są bardziej przewidywalne i pozwalają ponownie wykorzystać ten sam wygląd.

Warto też od razu zadbać o urządzenia mobilne. Prosta reguła media query pozwala zmienić układ przy mniejszej szerokości ekranu:

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .container {
    width: 94%;
  }

  h1 {
    font-size: 28px;
  }
}

Po każdej większej zmianie odświeżam stronę i sprawdzam kod w kilku szerokościach okna. Jeśli przeglądarka pokazuje starą wersję stylów, pomocne może być twarde odświeżenie strony albo zmiana nazwy pliku podczas testów, choć w poprawnie skonfigurowanym projekcie zwykle wystarczy wyczyścić pamięć podręczną.

Co zapamiętać przed kolejną zmianą stylu

Najbezpieczniejszy schemat wygląda tak: HTML opisuje elementy, osobny plik CSS nadaje im wygląd, a znacznik łączy oba dokumenty. Gdy coś nie działa, sprawdź kolejno lokalizację pliku, nazwę klasy, składnię i reguły nadpisujące styl.

Na początku nie potrzebujesz skomplikowanych narzędzi ani frameworka. Dwa poprawnie połączone pliki, czytelne klasy i kilka minut pracy z narzędziami deweloperskimi wystarczą, aby zrozumieć fundamenty stylowania stron.