Gdy zastanawiasz się, jak dodać CSS do HTML, najważniejszy wybór dotyczy miejsca, w którym umieścisz reguły stylów. Pokażę trzy sposoby, wyjaśnię, kiedy używać każdego z nich, a także przeprowadzę Cię przez podłączenie zewnętrznego pliku, selektory i naprawianie typowych błędów.

Trzy sposoby dodania CSS do dokumentu HTML

CSS można połączyć ze stroną na trzy sposoby. W praktyce najczęściej korzystam z zewnętrznego arkusza, ponieważ oddziela on strukturę dokumentu od wyglądu i pozwala zmieniać styl wielu stron w jednym miejscu.

Nie ma jednej technicznie poprawnej metody dla każdej sytuacji. Różnica polega głównie na utrzymaniu kodu. Im większa strona, tym szybciej style wpisane bezpośrednio w HTML zaczynają przeszkadzać.

Zewnętrzny plik CSS to najlepszy start

Utwórz dwa pliki w jednym folderze. Pierwszy nazwij index.html, a drugi style.css. Taki układ jest prosty, łatwy do sprawdzenia i ogranicza liczbę problemów ze ścieżkami.

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

W pliku HTML dodaj element w sekcji dokumentu przeznaczonej na informacje o stronie. W tym przykładzie pokazuję tylko fragment odpowiedzialny za podłączenie arkusza.

Moja pierwsza strona
Tekst sformatowany za pomocą CSS.

W pliku style.css umieść reguły opisujące wygląd elementów. Selektor h1 wybiera wszystkie nagłówki pierwszego poziomu, a .lead wskazuje element z klasą lead.

h1 {
  color: #1d4ed8;
  font-size: 2rem;
}

.lead {
  color: #374151;
  line-height: 1.6;
}

Po zapisaniu obu plików otwórz index.html w przeglądarce. Jeżeli nagłówek zmieni kolor, a akapit otrzyma większą interlinię, połączenie działa prawidłowo. Nie musisz dodawać atrybutu type="text/css", ponieważ we współczesnym HTML nie jest on potrzebny.

Przeczytaj również: Jak zrobić hiperłącze w HTML - proste przykłady i wskazówki

Co zrobić, gdy CSS znajduje się w innym folderze

Ścieżka w atrybucie href musi odpowiadać rzeczywistemu położeniu pliku. Jeśli arkusz znajduje się w katalogu css, użyj takiego zapisu:

Jeżeli plik HTML leży w folderze pages, a katalog css znajduje się poziom wyżej, potrzebujesz przejścia ..:

Najczęstsza pomyłka to poprawny kod i niepoprawna ścieżka. Wielkość liter w nazwach plików także może mieć znaczenie, szczególnie po umieszczeniu strony na serwerze działającym w systemie Linux.

Style wewnętrzne i inline mają swoje zastosowania

Style wewnętrzne zapisuje się w elemencie . To wygodne rozwiązanie, kiedy testujesz mały fragment albo tworzysz prostą, jednoplikową stronę, ale przy kilku dokumentach szybko pojawia się powtarzanie tych samych reguł.

Style inline trafiają bezpośrednio do elementu za pomocą atrybutu style. Przykład jest krótki, lecz miesza treść z prezentacją i zwykle utrudnia późniejsze zmiany.

  Ważny komunikat

Sam używam inline CSS głównie do szybkiego sprawdzania pojedynczej właściwości albo wyjątkowego elementu wygenerowanego dynamicznie. Nie budowałbym w ten sposób całego interfejsu, ponieważ poprawienie jednego koloru może później wymagać przeszukania wielu fragmentów HTML.

Klasy, selektory i kaskadowość decydują o efekcie

Samo podłączenie pliku nie wystarczy. CSS musi jeszcze wskazywać właściwy element. Najwygodniej nadawać elementom klasy, gdy chcesz użyć jednego stylu w kilku miejscach.

Zapisz dane
Przejdź dalej

.button-primary {
  display: inline-block;
  padding: 0.75rem 1rem;
  background-color: #2563eb;
  color: white;
  border-radius: 0.5rem;
  text-decoration: none;
}

Kropka przed nazwą oznacza selektor klasy. Dla identyfikatora używa się znaku #, a dla wszystkich elementów danego typu można wskazać nazwę znacznika, na przykład p. Nazwy klas w HTML i CSS muszą być identyczne, łącznie z myślnikami i wielkością liter.

Jeśli kilka reguł dotyczy tego samego elementu, przeglądarka rozstrzyga konflikt według kaskadowości. Znaczenie mają między innymi ważność reguły, szczegółowość selektora oraz kolejność zapisu. Zwykła reguła dla klasy zazwyczaj wygra z regułą dla samego znacznika, a styl inline zwykle ma pierwszeństwo przed normalnymi deklaracjami z arkusza.

p {
  color: black;
}

.article p {
  color: #374151;
}

p style="color: red"

Nie zaczynaj od dodawania !important do każdej właściwości. Ten dopisek może chwilowo ukryć problem, ale później utrudnia nadpisywanie stylów. Lepszym rozwiązaniem jest precyzyjniejszy selektor albo uporządkowanie kolejności reguł.

Co sprawdzić, gdy styl nie działa

Jeżeli strona nadal wygląda tak samo, nie zakładaj od razu, że CSS jest napisany źle. Najpierw sprawdź połączenie plików, bo właśnie tam najczęściej znajduje się problem.

1. Zweryfikuj nazwę pliku i upewnij się, że jest to naprawdę style.css, a nie na przykład style.css.txt.
2. Sprawdź ścieżkę w href. Policz, w którym folderze znajduje się HTML i gdzie leży arkusz.
3. Porównaj nazwę klasy w HTML i CSS, na przykład card-main oraz card-main.
4. Sprawdź składnię. Każda reguła powinna mieć nawiasy klamrowe, a deklaracje zwykle kończą się średnikiem.
5. Odśwież stronę. Przydatne może być twarde odświeżenie skrótem Ctrl + F5, gdy przeglądarka korzysta ze starej wersji pliku.
6. Otwórz narzędzia deweloperskie i sprawdź zakładkę stylów. Przekreślona reguła oznacza zwykle konflikt z inną deklaracją.

Przykładowo, ten zapis nie zadziała, jeśli w HTML użyto klasy headline, a w CSS zapisano .head-line. Przeglądarka nie zgaduje intencji autora, dlatego nawet jedna różnica w nazwie wystarczy, aby styl został pominięty.

/* HTML */
Aktualności

/* CSS */
.headline {
  margin-bottom: 1rem;
}

W narzędziach deweloperskich warto też sprawdzić, czy plik CSS został pobrany. Błąd w zakładce sieciowej albo komunikat o braku pliku zwykle od razu wskazuje na źle zbudowaną ścieżkę.

Jak uporządkować CSS w większym projekcie

Na początku wystarczy jeden plik, ale wraz z rozwojem strony dobrze oddzielić style według ich roli. Możesz mieć osobny arkusz dla podstaw, komponentów i układu, choć nie ma sensu dzielić pliku na kilkanaście części przy małej witrynie.

projekt/
├── index.html
├── css/
│   ├── base.css
│   ├── layout.css
│   └── components.css
└── images/

W HTML możesz podłączyć kilka arkuszy w określonej kolejności. Późniejsza reguła o podobnej szczegółowości może nadpisać wcześniejszą, dlatego kolejność plików powinna być przemyślana.

Nie używałbym @import jako podstawowej metody łączenia arkuszy dla początkującego. Działa, ale utrudnia śledzenie zależności i diagnozowanie problemów. Bezpośrednie elementy są czytelniejsze i jasno pokazują, jakie pliki ładuje dokument.

Dobrym nawykiem jest też stosowanie nazw klas opisujących funkcję elementu, na przykład .product-card albo .nav-link, zamiast nazw zależnych od koloru czy położenia. Dzięki temu zmiana wyglądu nie wymusza przebudowy HTML.

Najkrótszy test poprawnego połączenia HTML i CSS

Jeśli chcesz szybko potwierdzić, że arkusz jest podłączony, dodaj do niego bardzo charakterystyczną regułę. Zmiana tła całej strony albo koloru nagłówka jest łatwiejsza do zauważenia niż delikatna różnica w marginesie.

body {
  background-color: #fff7ed;
}

h1 {
  color: #c2410c;
}

Po pozytywnym teście wróć do właściwych stylów i rozbudowuj je małymi krokami. Taki sposób pracy oszczędza czas, bo od razu wiesz, czy problem dotyczy połączenia plików, selektora, czy konkretnej właściwości CSS.

Na start wybierz zewnętrzny arkusz CSS, podłącz go przez , a elementy styluj przede wszystkim za pomocą klas. To prosty schemat, który sprawdzi się zarówno w pierwszym ćwiczeniu, jak i w znacznie większym projekcie.