Gdy strona HTML wygląda jak surowy szkic, najczęściej brakuje jej arkusza stylów CSS. Pokażę, jak połączyć CSS z HTML na przykładzie osobnego pliku, a także kiedy użyć stylów wewnętrznych lub inline, jak ustawić poprawną ścieżkę i gdzie szukać błędów, gdy formatowanie nie działa.

Jak połączyć CSS z HTML za pomocą osobnego pliku

Najczęściej tworzę dwa pliki. Pierwszy to dokument HTML, na przykład index.html, a drugi to arkusz stylów, na przykład style.css. HTML odpowiada za strukturę strony, natomiast CSS określa jej wygląd, czyli kolory, odstępy, rozmiary i układ elementów.

Przyjmijmy, że oba pliki znajdują się w tym samym folderze. W dokumencie HTML, wewnątrz elementu , dodaję odwołanie do arkusza:

  
  
  
  


  
Witaj na stronie
  
To jest przykładowy tekst.

Sam plik style.css może zawierać takie reguły:

body {
  background-color: #f4f6f8;
  color: #222;
  font-family: Arial, sans-serif;
  margin: 40px;
}

h1 {
  color: #1769aa;
  font-size: 2rem;
}

p {
  line-height: 1.6;
}

Najważniejszy jest tutaj zapis . Wartość rel="stylesheet" informuje przeglądarkę, że dołączany zasób jest arkuszem stylów, a href wskazuje jego położenie. Po zapisaniu obu plików i odświeżeniu strony nagłówek oraz akapit powinny otrzymać nowe formatowanie.

Dlaczego arkusz zewnętrzny jest zwykle najlepszym wyborem

Osobny plik CSS pozwala wykorzystać te same style na wielu podstronach. Gdy zmienię kolor przycisków w jednym miejscu, aktualizacja może objąć całą witrynę, zamiast wymagać poprawiania każdego dokumentu HTML osobno.

To rozwiązanie poprawia również czytelność projektu. HTML opisuje treść, a CSS zajmuje się prezentacją. Taki podział szybko zaczyna mieć znaczenie, nawet przy niewielkiej stronie składającej się z kilku podstron.

Trzy sposoby dodawania stylów do dokumentu

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

Style wewnętrzne w elemencie style

Jeżeli nie chcę tworzyć dodatkowego pliku, mogę umieścić reguły CSS bezpośrednio w sekcji :

Ta metoda działa poprawnie, ale style są związane tylko z jednym dokumentem. Przy kilku stronach szybko pojawia się problem powielania kodu. Używam jej głównie podczas nauki, testowania pomysłu albo tworzenia bardzo małego przykładu.

Style inline w konkretnym elemencie

Najkrótszy zapis wygląda tak:

  Ważna informacja

Styl inline dotyczy wyłącznie jednego elementu. Może być przydatny przy jednorazowej zmianie, lecz w większym projekcie szybko utrudnia pracę. Reguły rozrzucone po HTML są trudniejsze do znalezienia, ponownego użycia i nadpisania.

Ścieżka do pliku CSS decyduje o tym, czy styl zadziała

Wiele problemów nie wynika z błędnego CSS, tylko z tego, że przeglądarka nie może znaleźć pliku. Jeżeli struktura projektu wygląda tak:

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

odwołanie w HTML powinno mieć postać:

Jeżeli arkusz znajduje się w folderze css, ścieżka musi uwzględniać ten katalog:

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

Gdy plik HTML znajduje się w podfolderze, a arkusz poziom wyżej, używa się oznaczenia ..:

Najczęstsze pomyłki to literówka w nazwie pliku, różnica między style.css a styles.css oraz błędna wielkość liter. Na części serwerów Style.css i style.css to dwa różne pliki, nawet jeśli lokalnie wszystko wygląda poprawnie.

Co zrobić, gdy CSS nie zmienia wyglądu strony

Jeśli po połączeniu plików nic się nie zmieniło, zaczynam od sprawdzenia elementu . Powinien znajdować się w sekcji , zawierać rel="stylesheet" i wskazywać istniejący plik.

Drugi krok to porównanie selektora z kodem HTML. Reguła:

.naglowek {
  color: blue;
}

zadziała tylko wtedy, gdy element ma klasę naglowek:

Tytuł strony

Podobnie selektor identyfikatora zapisany jako #menu wymaga atrybutu id="menu". Kropka oznacza klasę, a kratka identyfikator. To drobna różnica, ale właśnie na niej początkujący tracą sporo czasu.

Specyficzność i kolejność reguł

Czasem arkusz jest podłączony prawidłowo, lecz jedna reguła wygrywa z inną. Przeglądarka bierze pod uwagę między innymi specyficzność selektora, czyli jego siłę, oraz kolejność zapisów.

p {
  color: black;
}

.ostrzezenie {
  color: red;
}

Ten tekst będzie czerwony.

Selektor klasy jest bardziej szczegółowy niż selektor elementu, dlatego kolor czerwony zastąpi czarny. Do sprawdzania takich sytuacji najlepiej użyć narzędzi deweloperskich przeglądarki. Po kliknięciu elementu można zobaczyć, które reguły działają, a które zostały przekreślone.

Przeczytaj również: Jak dodać CSS do HTML? 3 metody, którą wybrać dla Twojej strony?

Odświeżenie pamięci podręcznej

Przeglądarka może przez chwilę wyświetlać starszą wersję arkusza. Zwykłe odświeżenie często wystarcza, ale przy uporczywym problemie pomaga twarde odświeżenie, na przykład skrót Ctrl + F5 w systemie Windows.

Jeżeli strona działa na serwerze, dobrze sprawdzić również, czy zmieniony plik został rzeczywiście wysłany. Lokalna kopia i wersja dostępna online mogą różnić się zawartością, mimo że oba dokumenty mają tę samą nazwę.

Jak pisać kod, żeby połączenie HTML z CSS było wygodne

Na początku projektu ustalam prostą strukturę folderów. Trzymam arkusze w katalogu css, obrazy w images, a pliki HTML w głównym katalogu lub w jasno nazwanych podfolderach. Taki porządek ogranicza liczbę błędnych ścieżek.

Klasy nazywam według funkcji elementu, a nie jego koloru. Nazwa .przycisk-glowny będzie bardziej użyteczna niż .niebieski, bo przy zmianie wyglądu nie trzeba zmieniać nazwy klasy w całym HTML.

• Do większych projektów wybieraj zewnętrzny arkusz CSS.
• Umieszczaj odwołanie do stylów w sekcji .
• Sprawdzaj ścieżki względne przed analizowaniem bardziej złożonych problemów.
• Nie nadużywaj !important, ponieważ utrudnia kontrolowanie stylów.
• Testuj stronę na różnych szerokościach ekranu, gdy tworzysz układ responsywny.

Sam zaczynam od prostych selektorów klas i dopiero później zwiększam ich szczegółowość. To ogranicza konflikty i sprawia, że kod łatwiej rozbudować. Nadmiar zagnieżdżeń oraz ciągłe ratowanie stylów przez !important zwykle sygnalizują, że struktura CSS wymaga uporządkowania.

Od pierwszego połączenia do działającej strony

Najkrótsza ścieżka wygląda tak. Tworzę plik index.html, dodaję plik style.css, umieszczam w HTML element i sprawdzam, czy nazwa oraz lokalizacja arkusza są prawidłowe. Potem przypisuję klasę do wybranego elementu i testuję jedną prostą regułę, na przykład zmianę koloru nagłówka.

Jeśli kolor się zmienił, połączenie działa i można spokojnie rozwijać projekt. Gdy efektu nie widać, sprawdzam kolejno ścieżkę, nazwę selektora, składnię CSS oraz pamięć podręczną przeglądarki. W większości przypadków problem leży w jednym z tych czterech miejsc, a nie w samym języku CSS.

Do nauki wystarczą dwa zwykłe pliki i przeglądarka. Nie potrzebujesz dodatkowego frameworka ani rozbudowanego narzędzia, żeby zrozumieć podstawy. Dobrze połączony HTML i CSS to fundament, na którym dopiero później warto budować bardziej zaawansowane rozwiązania.