Strona może mieć poprawnie napisany HTML, a mimo to wyglądać jak surowy dokument bez kolorów, odstępów i układu. W tym poradniku pokazuję, jak podłączyć CSS do HTML, kiedy użyć osobnego pliku, a kiedy stylu wewnętrznego lub inline, oraz jak szybko znaleźć przyczynę problemu, gdy arkusz nie działa.
Osobny plik CSS to najczytelniejszy sposób stylowania strony
-
Najlepsza metoda to plik CSS połączony znacznikiem
. - Arkusz umieszcza się zwykle w tej samej lokalizacji co HTML albo w podfolderze.
- Atrybut
rel="stylesheet"informuje przeglądarkę, że chodzi o arkusz stylów. - Styl wewnętrzny sprawdza się przy małych, jednorazowych stronach.
- Styl inline zostawiam głównie do szybkich testów i wyjątkowych przypadków.
Najlepszy start to osobny plik CSS
Jeżeli zastanawiasz się, jak podłączyć CSS do HTML w typowym projekcie, zacznij od utworzenia dwóch plików. Przykładowa struktura może wyglądać tak:
projekt/
├── index.html
└── style.cssW pliku style.css umieść reguły odpowiadające za wygląd strony:
body {
background-color: #f4f4f4;
color: #222;
font-family: Arial, sans-serif;
}
h1 {
color: #1769aa;
}W dokumencie HTML dodaj w sekcji przeznaczonej na informacje o stronie następujący element:
rel="stylesheet" określa rodzaj zasobu, a href="style.css" wskazuje lokalizację pliku. To właśnie ten drugi atrybut najczęściej powoduje problemy, gdy nazwa pliku albo ścieżka nie zgadza się z rzeczywistą strukturą projektu.
Po zapisaniu obu plików odśwież stronę w przeglądarce. Jeśli nagłówek zmieni kolor, połączenie działa. Ja zwykle zaczynam od takiego prostego testu, zanim dodam bardziej rozbudowane style, bo od razu pokazuje, czy problem dotyczy połączenia, czy samego kodu CSS.
Trzy sposoby dodawania stylów do dokumentu
CSS można umieścić w osobnym pliku, bezpośrednio w dokumencie HTML albo w atrybucie konkretnego elementu. Wszystkie metody są poprawne, ale różnią się wygodą, możliwością ponownego użycia i łatwością utrzymania kodu.
| Metoda | Przykład | Kiedy ma sens |
|---|---|---|
| Zewnętrzny arkusz | |
Większość stron i projektów |
| Styl wewnętrzny | |
Mała strona lub pojedynczy dokument |
| Styl inline | |
Szybki test lub wyjątkowy element |
Arkusz zewnętrzny
To rozwiązanie wybieram najczęściej. Jeden plik może obsługiwać wiele podstron, dzięki czemu zmiana koloru przycisków albo odstępów nie wymaga poprawiania każdego dokumentu osobno. Kod HTML pozostaje też czytelniejszy, bo opisuje strukturę, a CSS odpowiada za prezentację.
Styl wewnętrzny
Reguły można zapisać w elemencie style umieszczonym w dokumencie HTML:
Ta metoda bywa wygodna przy prostym prototypie, stronie demonstracyjnej lub dokumencie, który musi być zamknięty w jednym pliku. Przy większej witrynie szybko jednak prowadzi do powielania reguł i trudniejszego zarządzania zmianami.
Przeczytaj również: Jak dodać CSS do HTML? 3 metody i wybór najlepszej
Styl inline
Styl inline dotyczy tylko jednego elementu:
Ważna informacja
Nie polecam budowania całej strony w ten sposób. Style inline mają wysoką siłę nadpisywania i po kilku poprawkach trudno ustalić, dlaczego dany element wygląda właśnie tak. Używam ich raczej do krótkiego testu albo sytuacji, w której styl rzeczywiście dotyczy jednego, wyjątkowego przypadku.
Ścieżka do pliku decyduje o powodzeniu
Jeśli plik CSS znajduje się w tym samym folderze co dokument HTML, wystarczy podać jego nazwę:
Gdy arkusz znajduje się w podfolderze css, ścieżka musi uwzględniać ten katalog:
Możesz też przejść poziom wyżej i wskazać katalog nadrzędny:
Wielkość liter ma znaczenie, szczególnie po umieszczeniu strony na serwerze z systemem Linux. Pliki Style.css, style.css i STYLE.CSS mogą być traktowane jako trzy różne nazwy, nawet jeśli lokalnie komputer wydawał się pobłażliwy.
Sprawdź również rozszerzenie. Edytor tekstu może zapisać plik jako style.css.txt, jeśli rozszerzenia są ukryte. W takim przypadku przeglądarka nie znajdzie arkusza pod adresem zapisanym w atrybucie href.
Co sprawdzić, gdy CSS nie działa
Brak zmian po dodaniu arkusza zwykle wynika z jednej z kilku prostych przyczyn. Najpierw odśwież stronę skrótem Ctrl + F5, ponieważ przeglądarka mogła zachować starszą wersję pliku w pamięci podręcznej.
- Sprawdź, czy nazwa pliku w
hrefjest identyczna z nazwą na dysku. - Upewnij się, że arkusz ma rozszerzenie
.css, a nie.css.txt. - Zweryfikuj, czy ścieżka prowadzi do właściwego folderu.
- Sprawdź składnię CSS, zwłaszcza średniki, klamry i dwukropki.
- Upewnij się, że selektor pasuje do elementu HTML.
Przykładowo reguła .button zadziała dla elementu posiadającego class="button", ale nie dla elementu z id="button". Dla identyfikatora trzeba użyć selektora #button. To drobna różnica, która na początku potrafi zabrać sporo czasu.
W narzędziach deweloperskich przeglądarki otwórz zakładkę Network i odśwież stronę. Jeśli arkusz zwraca błąd 404, problemem jest ścieżka lub nazwa pliku. Gdy plik ładuje się poprawnie, ale reguła nie działa, zajrzyj do zakładki z regułami CSS i sprawdź, czy inny selektor jej nie nadpisuje.
Dlaczego jedna reguła wygrywa z inną
CSS oznacza kaskadowe arkusze stylów, więc przeglądarka musi ustalić, która reguła ma pierwszeństwo, gdy kilka dotyczy tego samego elementu. Znaczenie ma między innymi kolejność zapisu, szczegółowość selektora oraz użycie stylu inline.
p {
color: black;
}
.article p {
color: darkblue;
}W tym przykładzie drugi selektor jest bardziej szczegółowy i dlatego akapit wewnątrz elementu z klasą article będzie ciemnoniebieski. Zamiast od razu dodawać !important, lepiej znaleźć przyczynę konfliktu i poprawić selektor. Nadużywanie tego polecenia szybko utrudnia dalszą pracę.
Przy kilku arkuszach kolejność ich dołączenia również może zmienić wynik. Reguły zapisane później często nadpisują wcześniejsze, jeśli mają podobną szczegółowość. Dlatego dodatkowy plik z poprawkami warto ładować świadomie, a nie dokładać kolejne arkusze przypadkowo.
Mały test, który oszczędza dużo czasu
Gdy podłączam nowy arkusz, zaczynam od jednej widocznej reguły, na przykład zmiany koloru nagłówka. Dopiero gdy wiem, że połączenie działa, przechodzę do układu strony, responsywności i bardziej złożonych selektorów.
body {
outline: 5px solid red;
}Jeśli czerwona obwódka się pojawi, HTML korzysta z właściwego pliku CSS. Potem możesz usunąć testową regułę i spokojnie rozwijać projekt. Najważniejsza praktyka jest prosta: trzymaj większe style w osobnym pliku, pilnuj ścieżek i sprawdzaj błędy w narzędziach deweloperskich zamiast zgadywać.
