Jak podłączyć CSS do HTML? Prosty poradnik

Strona jest poprawnie zbudowana, ale bez arkusza stylów wygląda jak surowy szkic. Jeśli zastanawiasz się, jak podłączyć CSS do HTML, pokażę Ci najpewniejszą metodę z osobnym plikiem, a także style osadzone i inline, poprawne ścieżki oraz sposoby diagnozowania problemów.

Najprostszy sposób to osobny plik CSS

W praktyce niemal zawsze zaczynam od utworzenia dwóch plików. Pierwszy to dokument HTML, na przykład index.html, a drugi to arkusz stylów, na przykład style.css. Połączenie odbywa się za pomocą znacznika link.

Atrybut rel="stylesheet" informuje przeglądarkę, że wskazany zasób jest arkuszem stylów. Z kolei href zawiera ścieżkę do pliku. Współczesny HTML nie wymaga już dopisywania type="text/css", ponieważ CSS jest domyślnym typem dla takiego arkusza.

Jeżeli oba pliki znajdują się w tym samym folderze, wystarczy taki zapis:

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

W pliku CSS możesz umieścić na przykład:

body {
  background-color: #f4f6f8;
  color: #20252b;
  font-family: Arial, sans-serif;
}

h1 {
  color: #2457a6;
}

Po zapisaniu plików otwórz dokument HTML w przeglądarce. Jeśli tło zmieniło kolor, a nagłówek stał się niebieski, połączenie działa. To rozwiązanie polecam najbardziej, bo jeden arkusz można wykorzystać na wielu podstronach, a poprawka w jednym miejscu aktualizuje cały interfejs.

Trzy sposoby dodawania stylów do dokumentu

CSS można połączyć z HTML na trzy sposoby. Różnią się wygodą, zakresem działania i tym, jak łatwo później utrzymać kod.

Style wewnętrzne

Reguły można umieścić bezpośrednio w dokumencie HTML za pomocą znacznika style:

To rozwiązanie sprawdza się podczas tworzenia małego przykładu albo strony składającej się z jednego dokumentu. Przy kilku podstronach szybko jednak prowadzi do powtarzania kodu, dlatego traktuję je raczej jako rozwiązanie tymczasowe.

Style inline

Najbardziej bezpośrednia metoda polega na dodaniu deklaracji CSS do konkretnego elementu:

  Ważna informacja

Efekt pojawi się od razu, ale taki zapis utrudnia późniejsze zmiany. Style inline mają też wysoką wagę w kaskadzie, więc mogą nadpisywać reguły z arkusza zewnętrznego. Używam ich głównie do szybkiego testu albo w sytuacjach, gdy styl rzeczywiście zależy od konkretnej wartości generowanej dynamicznie.

Czy warto używać @import

Arkusz można także importować z poziomu CSS:

@import url("buttons.css");

Technicznie działa, ale przy podstawowym łączeniu HTML i CSS lepiej użyć kilku znaczników link. Taki zapis jest czytelniejszy, łatwiejszy do kontrolowania i zwykle korzystniejszy dla ładowania większych projektów.

Ścieżka do pliku CSS musi pasować do struktury folderów

Najczęstszy problem nie wynika z błędnego CSS, lecz z nieprawidłowego adresu w atrybucie href. Przeglądarka szuka pliku względem lokalizacji dokumentu HTML, dlatego struktura katalogów ma bezpośrednie znaczenie.

Przeczytaj również: Kod HTML strony: Jak go sprawdzić i co z niego wyczytać?

Plik CSS w osobnym folderze

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

W takim układzie użyj:

Jeżeli HTML znajduje się w podfolderze, trzeba cofnąć się o jeden poziom za pomocą ..:

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

W nazwach plików zwróć uwagę na wielkość liter. Na części serwerów Style.css, style.css i STYLE.CSS to trzy różne nazwy. Lokalnie strona może wyglądać poprawnie, a po publikacji przestać działać właśnie z tego powodu.

Co sprawdzić, gdy CSS nie działa

Jeżeli po dodaniu znacznika nic się nie zmienia, najpierw sprawdzam, czy plik rzeczywiście jest ładowany. Otwórz narzędzia deweloperskie przeglądarki i przejdź do zakładki Network albo Sources. Błąd 404 przy pliku CSS oznacza, że ścieżka jest nieprawidłowa.

• Porównaj nazwę pliku w folderze z wartością href.
• Sprawdź, czy plik nie ma przypadkiem podwójnego rozszerzenia, na przykład style.css.txt.
• Upewnij się, że znacznik link znajduje się w części konfiguracyjnej dokumentu HTML.
• Odśwież stronę z pominięciem pamięci podręcznej, używając Ctrl + F5.
• Sprawdź, czy selektor w CSS pasuje do elementu HTML.

Przykładowo dla takiego elementu:

Zapisz

poprawny selektor klasy wygląda tak:

.primary-button {
  background-color: #2463eb;
  color: white;
}

Kropka oznacza klasę. Jej brak zmieni znaczenie selektora, ponieważ primary-button bez kropki odnosiłby się do znacznika HTML o takiej nazwie. To drobny szczegół, ale właśnie takie drobiazgi najczęściej blokują początkujących.

Gdy plik jest ładowany, a reguła nadal nie działa, sprawdź składnię. Brak klamry, średnika albo literówka w nazwie właściwości może unieważnić część deklaracji. Narzędzia deweloperskie pokażą przekreśloną regułę, jeśli została nadpisana przez inną, bardziej szczegółową lub później zadeklarowaną.

Jak utrzymać porządek w większym projekcie

W małym ćwiczeniu wystarczy jeden plik style.css. Gdy strona rośnie, rozsądniej podzielić style według funkcji, na przykład na base.css, layout.css i components.css. Wszystkie arkusze można dołączyć osobno, pamiętając, że późniejsza reguła może nadpisać wcześniejszą.

Nie warto jednak dzielić plików bez powodu. Zbyt wiele arkuszy utrudnia znalezienie źródła problemu, szczególnie gdy kilka reguł styluje ten sam element. Na początku lepiej mieć jeden uporządkowany plik niż pięć małych, których wzajemnych zależności trudno się domyślić.

Jeśli strona ma osobny wygląd do druku, możesz ograniczyć działanie arkusza za pomocą atrybutu media:

Ten arkusz zostanie użyty podczas drukowania, a nie przy zwykłym wyświetlaniu strony. Podobnie można przygotować style dla określonych warunków ekranu, choć w responsywnych projektach najczęściej wygodniej trzymać reguły w jednym arkuszu i korzystać z zapytań medialnych CSS.

Jeden nawyk, który ułatwia naukę HTML i CSS

Najprościej pracować według stałego schematu: najpierw nadaję elementowi klasę, potem tworzę dla niej regułę w zewnętrznym pliku, a na końcu sprawdzam działanie w narzędziach deweloperskich. Dzięki temu szybko rozdzielam problem ze ścieżką od problemu z selektorem lub kaskadą.

• HTML odpowiada za strukturę i treść.
• CSS opisuje wygląd oraz układ.
• Znacznik link łączy dokument z zewnętrznym arkuszem.
• Atrybut href musi wskazywać właściwy plik.

Jeśli dopiero zaczynasz, wybierz osobny plik style.css i trzymaj go w przewidywalnym miejscu. To prosty nawyk, który od początku prowadzi do czytelniejszego kodu i oszczędza sporo czasu przy kolejnych stronach.