Masz gotowy plik HTML, ale strona wygląda jak surowy szkic bez kolorów, odstępów i układu? Pokażę, jak połączyć CSS z HTML, gdzie umieścić arkusz stylów, jak dobrać poprawną ścieżkę do pliku oraz co sprawdzić, gdy formatowanie nie działa. Dodam też krótkie przykłady trzech metod i wskażę rozwiązanie, które najlepiej sprawdza się w większych projektach.

Najprostszy sposób to osobny plik style.css

HTML odpowiada za strukturę strony, a CSS za jej wygląd. Żeby przeglądarka wiedziała, że ma pobrać reguły zapisane w zewnętrznym arkuszu, dodaj w sekcji element z atrybutem rel="stylesheet".

  
  
  


  
Witaj na stronie
  
To jest przykładowy tekst.

W tym przykładzie plik style.css znajduje się w tym samym folderze co dokument HTML. Sam arkusz może wyglądać tak:

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

h1 {
  color: #1769aa;
}

p {
  font-size: 18px;
}

Po otwarciu pliku HTML przeglądarka odczyta reguły z CSS i zastosuje je do pasujących elementów. To rozwiązanie polecam w większości przypadków, ponieważ jeden arkusz można wykorzystać na wielu podstronach, a zmiana wyglądu odbywa się w jednym miejscu.

Trzy sposoby dodawania CSS do dokumentu HTML

Nie zawsze trzeba tworzyć osobny plik. CSS można dołączyć na trzy sposoby, ale każdy z nich ma inne zastosowanie. W małym ćwiczeniu sprawdzi się styl wewnętrzny, natomiast w rozwijanej stronie szybko docenisz porządek, jaki daje zewnętrzny arkusz.

Zewnętrzny arkusz stylów

To najbardziej przejrzysta metoda. Tworzysz plik z rozszerzeniem .css, a potem wskazujesz go w HTML za pomocą href. Jeżeli kilka dokumentów korzysta z tego samego arkusza, zmiana jednego koloru lub rozmiaru czcionki może od razu objąć całą witrynę.

Style wewnątrz znacznika style

Ta opcja jest wygodna, gdy tworzę jedną demonstracyjną stronę albo testuję pojedynczą regułę. Przy większej liczbie stylów kod HTML zaczyna jednak puchnąć, dlatego traktuję ją raczej jako rozwiązanie tymczasowe.

Styl inline w konkretnym elemencie

  Wyróżniony tekst

Styl inline działa tylko na wskazany element. Bywa przydatny w wyjątkowych sytuacjach, ale łatwo prowadzi do bałaganu i utrudnia późniejsze poprawki. Nie budowałbym całej strony na stylach inline, ponieważ trudno wtedy kontrolować spójność wyglądu.

Jak ustawić poprawną ścieżkę do pliku CSS

Najczęstszy problem nie wynika z błędu w składni CSS, tylko z nieprawidłowej lokalizacji pliku. Atrybut href działa podobnie jak adres wskazujący konkretny plik na dysku lub serwerze. Jedna literówka wystarczy, aby przeglądarka nie znalazła arkusza.

HTML i CSS w tym samym folderze

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

W takim układzie użyj krótkiej ścieżki:

Arkusz w osobnym folderze

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

Wtedy odwołanie powinno wyglądać tak:

Jeżeli dokument HTML znajduje się w folderze pages, a katalog css jest poziom wyżej, trzeba cofnąć się o jeden poziom za pomocą ..:

W praktyce zwracam uwagę na trzy szczegóły: wielkość liter, rozszerzenie pliku i położenie katalogu. Na części serwerów Style.css i style.css to dwa różne pliki, nawet jeśli lokalnie system operacyjny traktuje je jako identyczne.

Jak zbudować działujący przykład krok po kroku

Najłatwiej sprawdzić połączenie na małym projekcie składającym się z dwóch plików. Utwórz folder, dodaj do niego index.html oraz style.css, a potem wpisz poniższy kod.

Plik index.html

  
  
  
  


  

    
Studio technologiczne
    
Prosty przykład połączenia HTML i CSS.
    Dowiedz się więcej
  

Przeczytaj również: Jak przekreślić tekst w HTML? <del>, <s>, CSS co wybrać?

Plik style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #eef2f7;
  font-family: Arial, sans-serif;
}

.card {
  width: min(90%, 420px);
  padding: 32px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  text-align: center;
}

.card h1 {
  margin-top: 0;
  color: #172b4d;
}

.card a {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  background: #1769aa;
  color: white;
  text-decoration: none;
}

Po otwarciu index.html powinieneś zobaczyć wyśrodkowaną kartę z cieniem, nagłówkiem i przyciskiem. Ten przykład pokazuje też ważną zasadę: HTML nadaje elementom znaczenie i strukturę, a CSS dobiera ich wygląd na podstawie selektorów takich jak .card czy .card a.

Co zrobić, gdy CSS nie działa

Jeśli strona nadal wygląda jak czysty HTML, nie przepisuj od razu całego kodu. Najpierw przejdź przez krótką listę kontrolną, bo w większości przypadków problem jest prosty do znalezienia.

• Sprawdź nazwę pliku. Upewnij się, że arkusz naprawdę nazywa się style.css, a nie na przykład style.css.txt.
• Sprawdź ścieżkę w href. Jeśli CSS znajduje się w folderze css, wpisz css/style.css.
• Sprawdź element link. Poprawna forma zawiera zarówno rel="stylesheet", jak i href.
• Odśwież stronę. Przeglądarka może wyświetlać wcześniejszą wersję arkusza. Spróbuj twardego odświeżenia kombinacją Ctrl + F5.
• Sprawdź selektor. Reguła dla .box nie zadziała na elemencie, który ma klasę box-container.
• Otwórz narzędzia deweloperskie. W zakładce „Network” lub „Sources” zobaczysz, czy plik CSS został wczytany.

Typowa literówka wygląda tak:

gdy faktyczna nazwa pliku to style.css. Przeglądarka nie zgłosi wtedy błędu w samym HTML, ale nie zastosuje żadnych reguł. W narzędziach deweloperskich często pojawi się status 404, który oznacza, że wskazanego pliku nie znaleziono.

Dlaczego jedna reguła CSS wygrywa z inną

Podłączenie arkusza to dopiero początek. Czasem plik jest wczytany poprawnie, ale konkretna właściwość nie działa, ponieważ inna reguła ma większy priorytet. CSS korzysta z kaskadowości, czyli mechanizmu rozstrzygającego, który styl ma ostatecznie obowiązywać.

Przykładowy tekst

p {
  color: black;
}

.lead {
  color: blue;
}

#intro {
  color: red;
}

Selektor klasy .lead jest bardziej szczegółowy niż selektor elementu p. Z kolei identyfikator ma jeszcze wyższy priorytet. Styl inline zwykle wygrywa z regułami zapisanymi w arkuszu, ale używanie !important jako szybkiej naprawy często tylko utrudnia późniejsze zarządzanie kodem.

Gdy formatowanie nie działa, sprawdź w inspektorze elementu, czy dana właściwość jest przekreślona. To znak, że przeglądarka ją odczytała, ale zastosowała inną regułę o wyższym priorytecie. Najpierw popraw selektory i kolejność stylów, a dopiero później sięgaj po bardziej szczegółowe rozwiązania.

Jak utrzymać porządek w projekcie

W małym ćwiczeniu jeden plik CSS wystarczy. Przy większej stronie możesz podzielić style na kilka arkuszy, na przykład base.css dla podstaw, layout.css dla układu i components.css dla przycisków lub kart. Trzeba jednak zachować rozsądek, bo zbyt wiele plików utrudnia znalezienie właściwej reguły.

Trzymaj się jednej konwencji nazw i używaj klas opisujących funkcję elementu, na przykład .button-primary albo .article-card. Unikaj stylowania wszystkiego przez identyfikatory, ponieważ klasy łatwiej ponownie wykorzystać. Ja na początku projektu od razu tworzę prostą strukturę folderów, bo późniejsze porządkowanie przypadkowo rozmieszczonych plików zajmuje znacznie więcej czasu.

Warto też pamiętać, że CSS nie zastępuje poprawnej struktury HTML. Najpierw buduję logiczną treść z nagłówków, akapitów, list i przycisków, a dopiero potem nadaję jej wygląd. Dzięki temu strona jest łatwiejsza w rozwoju, czytelniejsza dla użytkownika i lepiej przygotowana do działania na ekranach o różnych rozmiarach.

Od działającego połączenia do dobrego kodu

Jeżeli zależy Ci tylko na szybkim teście, wystarczy element oraz poprawna ścieżka do pliku. W realnym projekcie wybierz zewnętrzny arkusz, trzymaj HTML i CSS w uporządkowanej strukturze, a problemy diagnozuj przez nazwę pliku, ścieżkę, selektory i narzędzia deweloperskie.

Najważniejsza praktyczna zasada jest prosta: najpierw sprawdź, czy arkusz został wczytany, a dopiero potem analizuj kaskadowość. To rozdzielenie dwóch problemów oszczędza sporo czasu i pozwala szybko przejść od pustej strony do świadomie zaprojektowanego interfejsu.