Wygląd i funkcjonalność stron internetowych nierzadko przesądza o tym, czy firma będzie zarabiać. Dotyczy to zarówno sklepu internetowego, jak i strony ofertowej, czy do zbierania leadów. Na szczęście mamy dużą dowolność w kreowaniu strony w oparciu o zasady UX i UI. Zapewniają nam to HTML i CSS. Jak je połączyć?
HTML – co to jest?
HTML dał upust kreatywności twórców pierwszych stron internetowych. Każdy, kto pamięta początki internetu w polskich domach, nierozerwalnie wiąże HTML z wzorami, kolorami, kształtami, czcionkami i efektami, które kiedyś robiły wrażenie. Dziś ich wspomnienie wywołuje uśmiech, a u niektórych wręcz ciarki żenady. Jednak to właśnie tym eksperymentom zawdzięczamy dziś spójne, minimalistyczne projekty stron. Sam HTML, czyli Hypertext Markup Language, służy przede wszystkim do określania struktury witryny i porządkowania jej zawartości. Za pomocą odpowiednich znaczników HTML możemy wskazać, gdzie znajduje się nagłówek, akapit, lista czy odnośnik. W ten sposób powstaje dokument HTML, który przeglądarka może odczytać i odpowiednio wyświetlić użytkownikowi. Warto jednak pamiętać, że HTML i CSS pełnią różne funkcje, a sam HTML nie odpowiada za całą warstwę wizualną strony.
Czym jest CSS?
Struktura i funkcjonalność to nie wszystko. Aby strona była atrakcyjna wizualnie, musimy nadać jej odpowiedniego charakteru poprzez CSS, czyli Cascading Style Sheets. Po polsku określamy je jako kaskadowe arkusze stylów, ponieważ pozwalają ustalać sposób prezentowania elementów znajdujących się w kodzie HTML. Możemy umieścić kod CSS w dokumencie, wykorzystać styl wewnętrzny, styl inline albo przygotować osobny plik, który będzie odpowiadał za wygląd całej witryny. W przypadku rozbudowanych stron najwygodniejszy okazuje się zwykle plik CSS, ponieważ pozwala zarządzać wyglądem wielu elementów z jednego miejsca. Za pomocą CSS możemy między innymi:
- określić kolor tła elementu za pomocą właściwości background-color,
- ustawić wielkość tekstu, np. wykorzystując właściwość font-size,
- zmienić sposób wyrównania treści, np. przez text-align,
- ustalić kolory, marginesy, odstępy i rozmiary poszczególnych elementów,
- dodać cienie, obramowania, gradienty oraz inne efekty wizualne,
- dopasować wygląd strony do różnych rozmiarów ekranów.
Co daje łączenie HTML i CSS?
HTML i CSS to mieszanka, która w marketingu pozwala przełożyć założenia marki na wygląd strony internetowej. Jeden język odpowiada za uporządkowanie treści, a drugi pozwala nadać jej odpowiednią formę i charakter. Dzięki temu zwykły plik HTML może zmienić się w przejrzystą stronę ofertową, sklep internetowy czy landing page dopasowany do potrzeb odbiorców. Połączenie struktury z warstwą wizualną ułatwia też budowanie spójnego doświadczenia użytkownika, co ma znaczenie zarówno dla odbioru marki, jak i realizacji celów biznesowych. Co ważne, nie trzeba wpisywać wszystkich ustawień bezpośrednio do dokumentu HTML. Można przygotować arkusz stylów i zastosować go w wielu miejscach serwisu. W efekcie zmiana jednego elementu w kodzie CSS może wpłynąć na wygląd wielu stron, bez konieczności ręcznego poprawiania każdej z nich.
Jak połączyć HTML z CSS?
To, w jaki sposób podłączyć CSS do strony, zależy przede wszystkim od tego, jak chcemy zarządzać jej wyglądem. Możemy skorzystać z zewnętrznego pliku CSS, umieścić style bezpośrednio w kodzie strony albo zastosować je przy konkretnym elemencie. Każde rozwiązanie działa nieco inaczej i sprawdza się w innych sytuacjach. Najczęściej wybierane jest użycie zewnętrznego pliku CSS, ponieważ pozwala zachować porządek w kodzie i łatwiej zarządzać wyglądem większej witryny.
Połączenie zewnętrznego pliku CSS
To rozwiązanie polega na utworzeniu pliku CSS zawierającego style i wskazaniu go w dokumencie HTML. Aby skorzystać z pomocą zewnętrznego pliku CSS, należy umieścić odpowiedni znacznik <link> w sekcji <head>, czyli w nagłówku dokumentu HTML. Przykładowo:
<!doctype html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
Plik style.css powinien znajdować się we wskazanej lokalizacji, np. w tym samym folderze co plik HTML. Można też podać inną ścieżkę, jeśli arkusz stylów znajduje się w osobnym katalogu. Takie rozwiązanie określa się mianem arkusza zewnętrznego i jest szczególnie wygodne, gdy jeden zestaw reguł ma być wykorzystywany na wielu podstronach.
Styl wewnętrzny
Drugą możliwością jest umieszczenie kodu CSS bezpośrednio w nagłówku dokumentu. W tym przypadku wykorzystujemy znacznik <style> znajdujący się w sekcji <head>:
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
To dobre rozwiązanie przy niewielkich stronach lub wtedy, gdy chcemy wprowadzić zmiany dotyczące konkretnego dokumentu. Nie trzeba tworzyć zewnętrznego pliku, ponieważ reguły znajdują się bezpośrednio w kodzie HTML. Styl wewnętrzny może być też przydatny, gdy zależy nam na modyfikacji wybranych elementów bez ingerowania w główny arkusz stylów.
Czytaj także: Podstawowe komendy HTML – lista dla początkujących
Styl inline
Ostatnia metoda polega na wykorzystaniu atrybutu style bezpośrednio przy wybranym elemencie. Dzięki pomocą atrybutu style możemy przypisać konkretną właściwość CSS pojedynczemu elementowi, np.:
<p style=”color: blue; font-size: 16px;”>Przykładowy tekst</p>
W tym przypadku styl inline działa wyłącznie w odniesieniu do elementu, przy którym został zapisany. Sprawdza się przy pojedynczych, niewielkich zmianach, ale przy większej stronie szybko może utrudnić zarządzanie kodem. Jeśli więc chcemy wygodnie kontrolować wygląd całego serwisu, lepszym rozwiązaniem pozostaje użycie zewnętrznego pliku css i odwołanie do niego w każdym potrzebnym dokumencie HTML.