HTML i CSS — w dużym uproszczeniu to właśnie te dwa języki są podstawą każdej witryny internetowej, w tym oczywiście także naszej strony. Jeśli myślisz o rozpoczęciu przygody z web developmentem, to właśnie od nich powinieneś zacząć naukę.
Jednak w jaki sposób podłączyć CSS do HTML, aby stworzyć stronę nie tylko funkcjonalną, ale i estetyczną? I jak dokładnie uzupełniają się te dwa fundamentalne elementy stron internetowych? Na to pytanie odpowiemy w dzisiejszym wpisie.
Kod HTML a arkusz stylów CSS — co je łączy?
Każda strona internetowa jest zbudowana przy użyciu dwóch elementów — pliku HTML, który odpowiada za strukturę witryny (opisuje m.in. sekcje, paragrafy, nagłówki) oraz pliku CSS zawierającego style i umożliwiającego formatowanie oraz stylizację zawartych na stronie elementów.
Przy pomocy pliku CSS (czyli arkusza stylów) określamy układ treści na stronie i odstępy między nimi, przypisujemy np. kolor tła lub rozmiar czcionki, dodajemy bardziej zaawansowane elementy wizualne (np. cienie, gradienty) — w skrócie, decydujemy o prezentowaniu się konkretnego elementu na stronie.
Plik CSS bardziej szczegółowo opisaliśmy tutaj: Język CSS – zastosowanie w SEO
Plik HTML pozwala również na edycję elementów strony w podstawowym zakresie, jednak w porównaniu do arkuszy stylów CSS — jest to bardzo ograniczona opcja. W praktyce więc stworzenie strony jednocześnie funkcjonalnej i atrakcyjnej dla użytkownika (czyli zgodnej z zasadami SXO) jest niemożliwe bez wsparcia języka CSS.
Dokument HTML bardziej szczegółowo opisaliśmy tutaj: Język HTML – podstawy i zastosowanie
Zdj. 1. Po prawej stronie widzimy, jak mogłaby wyglądać witryna pozbawiona arkuszy stylów CSS, źródło: That Time I Tried Browsing the Web Without CSS – CSS-Tricks.
Czy kaskadowe arkusze stylów CSS zawsze są podłączone do dokumentu HTML?
Pomimo tego, że CSS i HTML świetnie się uzupełniają, należy pamiętać, iż kaskadowe arkusze stylów CSS oraz struktury dokumentu HTML domyślnie są od siebie odseparowane. Ułatwia to zachowanie spójności stylistycznej bardziej rozbudowanych stron i upraszcza wprowadzanie zmian. W ten sposób przy pomocy jednego arkusza możemy zdefiniować wygląd wszystkich podstron danego serwisu — zamiast pracować nad każdą z nich osobno.
Jak podłączyć CSS do HTML w praktyce?
Skoro więc arkusze stylów i struktura dokumentu są od siebie oddzielone, to w jaki sposób możemy osiągnąć połączenie CSS z HTML, aby dały razem rezultat w postaci efektownej witryny? Mamy do wyboru trzy sposoby:
- linkując zewnętrzny plik CSS w dokumencie HTML (styl zewnętrzny);
- umieszczając plik CSS bezpośrednio w pliku HTML przy pomocy znacznika <style> w sekcji <head> (styl wewnętrzny);
- definiując plik CSS dla jednego, wybranego elementu HTML za pomocą atrybutu style (styl inline).
Każda z tych metod ma swoje zastosowania — chociaż w praktyce zdecydowanie najczęściej wykorzystuje się styl zewnętrzny, który zachowuje „czystość” kodu HTML i pozwala zastosować ten sam arkusz stylów na wielu stronach.
Mówiąc jeszcze o stylach, nie możemy nie wspomnieć o ich hierarchii — określającej, który ze styli CSS rzeczywiście „zadziała” na stronie. Zasada jest prosta: „pierwszeństwo” zawsze mają style najpóźniej zdefiniowane w kodzie.
Styl zewnętrzny
Zacznijmy od najpopularniejszej metody przyłączania CSS do HTML.
Jak już wyjaśniliśmy, pozostawienie arkusza stylu w zewnętrznym pliku ma sporo praktycznych korzyści z punktu widzenia web developerów… ale także w kontekście SEO. Linkując arkusze stylów z CSS, zamiast przenosić je w całości do dokumentu HTML, możemy zrobić porządek w kodzie strony, zwyczajnie go upraszczając — roboty Google to doceniają.
Do połączenia zewnętrznego pliku CSS z dokumentem HTML za pomocą tego stylu wykorzystujemy bardzo prosty znacznik:
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
Jak widać, umieszczamy go w w sekcji <head>, czyli w nagłówku dokumentu. „styles.css” to oczywiście przykładowa nazwa pliku zawierającego style CSS, które chcemy wykorzystać na stronie.
Źródło: https://unsplash.com/photos/person-using-black-asus-laptop-YiX1jsdbWhY
Dlaczego styl zewnętrzny jest preferowany?
Połączenie z pomocą zewnętrznego pliku CSS to rozwiązanie popularne nie bez powodu. Przede wszystkim, tego typu separacja kodu (tj. rozdzielenie HTML i CSS) ułatwia utrzymanie i ewentualne modyfikacje strony — wystarczy wprowadzić zmianę styli w jednym miejscu, by zmiana była widoczna na wszystkich korzystających z tego arkusza stronach jednocześnie.
Dodatkowym atutem jest poprawa wydajności witryny. Przeglądarka może bowiem załadować plik CSS do pamięci podręcznej i użyć go dla wielu stron, choć nie jest to reguła.
Czy użycie zewnętrznego pliku CSS ma jakieś wady?
Tak. Choć takie rozwiązanie niesie wiele korzyści, niestety ma także swoje ograniczenia. Do najczęściej wymienianych wad wykorzystania arkusza zewnętrznego należą:
- większa liczba żądań — ponieważ każdy zewnętrzny plik CSS to dodatkowe żądanie HTTP, które przeglądarka musi wykonać, aby pobrać nowy plik,
- problemy z cache’owaniem — choć przeglądarki przechowują pliki CSS w pamięci podręcznej, problemy z konfiguracją serwera lub przeglądarki mogą czasem uniemożliwić prawidłowe cache’owanie. W takiej sytuacji pliki CSS pobierają się za każdym razem, gdy dana osoba odświeży stronę internetową,
- mniejsza kontrola nad stylem — w niektórych, specyficznych sytuacjach, metoda zewnętrznego arkusza CSS może okazać się za mało elastyczna w stosunku do potrzeb.
Styl wewnętrzny
Metodą stojącą wyżej w hierarchii stylów jest tzw. styl wewnętrzny. Aby z niego skorzystać, należy dodać CSS bezpośrednio do dokumentu HTML przy pomocy znacznika <style>. W tym przypadku CSS również umieszczamy w sekcji <head>, a więc w nagłówku dokumentu HTML.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
Ze stylu wewnętrznego najczęściej korzysta się w celu nadpisania wybranych stylów z zewnętrznego pliku CSS i naniesienia specyficznych dla danej podstrony poprawek.
Korzyści stylu wewnętrznego w łączeniu CSS z HTML
Dodanie arkusza stylów bezpośrednio w dokumencie HTML także ma pewne zalety. To świetne rozwiązanie zwłaszcza dla mniejszych, prostych projektów. Wygodne jest także szybkie prototypowanie oraz pełna kontrola nad stylem danej strony.
Źródło: https://unsplash.com/photos/text-jG8nlwLRZTM
Styl inline
Jest to styl umożliwiający dodanie CSS do konkretnego elementu HTML — nadpisując przy tym wszystkie inne style. Stylizowanie inline wykorzystuje się bardzo rzadko — a jeśli już, to raczej do naniesienia drobnych modyfikacji w stosunku do arkuszy stylów określonych w zewnętrznym pliku CSS. Przykładowy fragment kodu w dokumencie HTML z atrybutem style mógłby wyglądać tak:
<body>
<h1 style=”color:black; text-align:center; background-color:white;”>Lorem ipsum…</h1>
<p style=”color:gray;”>…dolor sit amet, consectetur adipiscing elit</p>
</body>
Największe zalety style inline
Styl inline jest rozwiązaniem preferowanym przez osoby poszukujące szybkiej i precyzyjnej kontroli nad wyglądem pojedynczych elementów na stronie. Jest to bowiem doskonałe narzędzie do wprowadzania niewielkich zmian w stylu, które nie wymaga edytowania w obrębie arkusza zewnętrznego stylów.
