HTML/CSS, Poradniki webdevelopera

Jak dodać CSS do HTML?

0

Rozpoczynając przygodę z tworzeniem stron internetowych, warto poznać kluczowe fundamenty budowy oraz dobre praktyki projektowania. Zdecydowanie umiejętność podłączenia zewnętrznego arkuszu stylów będzie przydatną wiedzą, którą będziesz wykorzystywał zawsze podczas tworzenia nowej strony. Bez większych wstępów zapraszamy do artykułu.

Jakie mamy dostępne metody podłączenia stylów?

Kodować style strony można w zasadzie na trzy sposoby:

  • W zewnętrznych plikach .css
  • W sekcji head strony pomiędzy znacznikami <style></style>
  • Style Inline – w linii z tagiem

W dalszej części artykułu, przedstawię kluczowe zalety i wady poszczególnych podejść.

Kodowanie w zewnętrznym pliku .css

1. Kodowanie stylów w zewnętrznych plikach .css

Jest to zdecydowanie najpopularniejsza metoda kodowania stylów, pozwalająca zachować pewną przejrzystą strukturę (oddzielamy tagi HTML od oscylowania). Takie podejście można spotkać w zasadzie na każdym serwisie internetowym.

Aby podłączyć zewnętrzny plik .css należy wprowadzić następujący kod pomiędzy znaczniki <head></head>:

<link rel="stylesheet" type="text/css" href="arkusz.css">

Kluczowym elementem powyższego kodu jest parametr href=”” – określa on ścieżkę do naszego pliku .css

Jeżeli plik jest na tym samym poziomie zagnieżdżenia co dokument w którym go podłączamy to ścieżką href będzie po prostu href=”nazwapliku.css”.

W przypadku w którym plik .css będzie się znajdował w katalogu np. o nazwie assets – ścieżka będzie wyglądała następująco:

<link rel="stylesheet" type="text/css" href="assets/nazwapliku.css">

Zalety podejścia:

  • Zachowanie przejrzystości kodu – oddzielenie tagów HTML od stylów
  • Możliwość podpinania stylów do wielu dokumentów
  • Możliwość określenia hierarchii naszych plików poprzez odpowiednie nazewnictwo np. footer.css – określający, że będą tam znajdować się style dedykowane stopce

Wady podejścia:

  • W przypadku wrzucania wszystkich stylów do jednego pliku, pojawi się sytuacja w której dana podstrona nie wykorzystują połowy selektorów

Kodowanie w sekcji head

2. Kodowanie stylów pomiędzy znacznikami <style></style>

Oprócz kodowania stylów w zewnętrznych plikach .css możemy wykorzystać podejście <style></style>, gdzie kod jest zagnieżdżony w sekcji <head></head>. Praktycznie kod wygląda następująco:

<!DOCTYPE HTML>
<html lang="pl">
<head>
 <title>Tytuł strony</title>
 <style>
  p {color:red; font-size:15px;}
 </style>
</head>
<body>
 <p>To jest przykładowe oscylowanie akapitu – kolor czerwony</p>
</body>
</html>

Jak widzimy, nasz kod jest zawarty w sekcji <head></head> strony i działa prawidłowo.

Zalety podejścia:

  • Wygodny sposób do szybkiej prezentacji elementu
  • Działa on dla wielu tagów – nie pojedynczej jednostki jak w przypadku podejścia Inline

Wady podejścia:

  • Brak podziału pomiędzy stylami a tagami HTML
  • Większa liczba stylów spowoduje bałagan i mało przejrzysty kod
  • Brak możliwości includowania (ładowania) zdefiniowanych stylów do wielu plików

Kodowanie inline

3. Kodowanie Style Inline

Czas na ostatnią możliwość, jeżeli chodzi o oscylowanie kodu. Podejście Inline jest najmniej eleganckim i funkcjonalnym rozwiązaniem. Polega ono na dopisywaniu do każdego tagu jego dedykowanych stylów np.:

<!DOCTYPE HTML>
<html lang="pl">
<head>
 <title>Tytuł strony</title>
</head>
<body>
 <p style="color:red; font-size:15px;">To jest przykładowe oscylowanie akapitu – kolor czerwony</p>
 <p style="color:blue;">To jest tekst niebieski</p>
</body>
</html>

Sama metoda wydaje się być najbardziej intuicyjna, jednak powoduje szereg problemów. Oczywiście wykorzystanie metody Inline jest zasadne tylko w szczególnych przypadkach.

Zalety podejścia:

  • W szybki sposób jesteśmy w stanie oscylować dany elementem

Wady podejścia:

  • Brak podziału pomiędzy stylami a tagami HTML
  • Większa liczba stylów spowoduje bałagan i mało przejrzysty kod
  • Brak możliwości includowania (ładowania) zdefiniowanych stylów do wielu plików
  • Jeżeli chcemy dokonać zmian oscylowania to daną zmianę musimy wdrożyć we wszystkich tagach a nie w jednym miejscu

Podsumowanie

Jak widzimy spośród dostępnych opcji, najbardziej praktyczną jest metoda polegająca na kodowaniu stylów w zewnętrznych plikach .css.

Jeżeli chcesz dowiedzieć się czym są klasy i identyfikatory w HTML to zapraszamy do naszego kolejnego artykułu blogowego.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *