Metoda dołączania arkusza stylów do dokumentu HTML nosi nazwę łączenia CSS z HTML i można ją zrealizować na kilka sposobów: poprzez zewnętrzny arkusz stylów, osadzenie styli w nagłówku dokumentu lub stosowanie stylów bezpośrednio w atrybutach elementów HTML. Każda z tych metod ma swoje zastosowania i specyfikę, dlatego warto znać ich różnice, zalety oraz przykłady użycia w praktyce.
Zewnętrzny arkusz stylów (external stylesheet)
Najbardziej zalecaną i najczęściej używaną metodą jest dołączenie zewnętrznego arkusza stylów. Polega to na zapisaniu reguł CSS w oddzielnym pliku tekstowym z rozszerzeniem .css (np. style.css) i dodaniu odniesienia do tego pliku w sekcji <head> dokumentu HTML za pomocą znacznika <link>.
Przykład kodu
Plik HTML
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>Przykładowy akapit tekstu.</p>
</body>
Plik style.css
p {
font-family: Verdana;
font-size: 11px;
color: #003366;
}
Zalety tej metody
- Umożliwia wielokrotne wykorzystanie tego samego stylu na wielu stronach,
- ułatwia zarządzanie i aktualizację wyglądu całego serwisu – zmiana w jednym pliku wpływa na wszystkie powiązane dokumenty,
- poprawia czytelność i strukturę kodu źródłowego HTML, oddzielając treść od prezentacji.
Wewnętrzny arkusz stylów (internal stylesheet)
Drugą metodą jest zastosowanie stylów bezpośrednio w nagłówku dokumentu HTML. Reguły CSS umieszczane są w sekcji <head> pomiędzy znacznikami <style>...</style>.
Przykład kodu
<head>
<style type="text/css">
p {
font-family: Verdana;
font-size: 11px;
color: #003366;
}
</style>
</head>
<body>
<p>Przykładowy akapit tekstu.</p>
</body>
Zalety tej metody
- Przydatna, gdy trzeba zastosować unikalny wygląd na pojedynczej stronie lub podczas szybkiego prototypowania,
- nie wymaga tworzenia dodatkowego pliku CSS.
Wady tej metody
- Trudność w utrzymaniu stylów przy większym projekcie (duplikacja, brak centralnego miejsca zarządzania zmianami).
Style lokalne – atrybut style (inline styles)
Trzeci sposób to bezpośrednie przypisanie stylu do konkretnego elementu HTML, przy użyciu atrybutu style.
Przykład kodu
<p style="font-family: Verdana; font-size: 11px; color: #003366;">
Przykładowy akapit tekstu.
</p>
Zalety tej metody
- Błyskawiczne nadpisanie stylu dla pojedynczego elementu,
- umożliwia dynamiczną zmianę stylów np. za pomocą JavaScript.
Wady tej metody
- Utrudnia zarządzanie wyglądem całego serwisu i odziedziczalność stylów,
- brak separacji treści i prezentacji.
Podsumowanie praktyczne
- Dołączenie zewnętrznego arkusza stylów za pomocą
<link rel="stylesheet" href="plik.css">w sekcji<head>to najlepsza praktyka przy budowie większych serwisów i stron internetowych, - wewnętrzny arkusz stylów (
<style>...</style>) polecany jest przy jednolitym stylizowaniu pojedynczych dokumentów, - style lokalne (atrybut
style) używaj tylko do jednorazowych, unikalnych modyfikacji.
Dobrze jest stosować odpowiednią metodę w zależności od potrzeb projektu, pamiętając o przejrzystości kodu, łatwości utrzymania oraz wygodzie rozwoju witryny internetowej.
