Jak połączyć HTML z CSS na stronie internetowej?
3 min
3 min
Na skróty
HTML i CSS — w dużym uproszczeniu to właśnie te dwa języki są podstawą każdej strony internetowej. Jeśli myślisz o rozpoczęciu przygody z web developmentem, to właśnie od nich powinieneś zacząć naukę. A jak je ze sobą połączyć, aby stworzyć stronę nie tylko funkcjonalną, ale i estetyczną? Na to pytanie odpowiemy w dzisiejszym wpisie.
Każda strona internetowa jest zbudowana przy użyciu dwóch języków — HTML, który odpowiada za strukturę witryny (opisuje m.in. sekcje, paragrafy, nagłówki) oraz CSS — umożliwiający formatowanie i stylizację zawartych na stronie elementów. Przy pomocy CSS-a określamy układ treści na stronie i odstępy między nimi, przypisujemy kolory i czcionki, dodajemy bardziej zaawansowane elementy wizualne (np. cienie, gradienty) — w skrócie, decydujemy o tym, jak dany element będzie prezentował się na stronie.
HTML sam w sobie również oferuje podstawowe narzędzia do edycji elementów strony, ale w porównaniu do CSS — są one bardzo ograniczone. W praktyce stworzenie strony jednocześnie funkcjonalnej i atrakcyjnej dla użytkownika (czyli zgodnej z zasadami SXO) jest bez wsparcia CSS-a niemożliwe.
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
Co jednak dla tematu naszego artykułu najważniejsze — arkusze stylów CSS oraz struktura dokumentu w HTML domyślnie są od siebie odseparowane. Ułatwia to zachowanie spójności stylistycznej bardziej rozbudowanych stron i upraszcza wprowadzanie zmian. Przy pomocy jednego arkusza możemy zdefiniować wygląd wszystkich podstron danego serwisu — zamiast pracować nad każdą z nich osobno.
Skoro więc arkusze stylów i struktura dokumentu są od siebie oddzielone, to w jaki sposób możemy je ze sobą połączyć, aby dały razem efekt w postaci efektownej witryny? Mamy do wyboru trzy sposoby:
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 stylu na wielu stronach.
Mówiąc jeszcze o stylach, nie możemy nie wspomnieć o ich hierarchii — określającej, który styl CSS rzeczywiście „zadziała” na stronie. Zasada jest prosta: „pierwszeństwo” zawsze ma styl najpóźniej zdefiniowany w kodzie.
Zacznijmy od najpopularniejszej metody łączenia CSS z 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 i w kontekście SEO. Linkując arkusz stylu CSS zamiast przenosić go w całości do dokumentu HTML możemy znacznie uprościć kod strony — roboty Google to doceniają.
Do połączenia zewnętrznego pliku CSS z dokumentem HTML wykorzystujemy bardzo prosty znacznik:
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
który, jak widać, umieszczamy w sekcji <head> dokumentu. „styles.css” to oczywiście przykładowa nazwa pliku zawierającego style CSS, które chcemy wykorzystać na stronie.
Metodą stojącą wyżej w hierarchii stylów jest umieszczenie treści arkusza stylu bezpośrednio w dokumencie HTML przy pomocy znacznika <style>. W tym przypadku CSS również umieszczamy w sekcji <head> stylowanego dokumentu:
<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.
Jest to styl umożliwiający dodanie CSS do konkretnego elementu w kodzie 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 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>
Zawodowy copywriter oraz student psychologii na Uniwersytecie Warszawskim. W świecie marketingu internetowego równie mocno, co chwytliwe (i wartościowe) treści interesuje go dobry design. Gdy nie zajmuje się tworzeniem contentu, odkrywa perełki kina niezależnego i pracuje nad własnymi opowiadaniami.
