Stylowanie zewnętrzne
Stylowanie zewnętrzne jest metodą polegającą na umieszczaniu stylów CSS w osobnym pliku tekstowym z rozszerzeniem .css, który jest następnie dołączany do strony HTML za pomocą tagu <link>. Warto podkreślić, że jest to najbardziej zalecana metoda stosowania styli, gdyż pozwala na utrzymanie porządku, modularność, łatwe ponowne wykorzystanie styli oraz ułatwia zarządzanie kodem.
Zalety stylowania zewnętrznego
Na wstępie warto również zaznaczyć, że z punktu projektowania nowoczesnych stron internetowych stylowanie zewnętrzne jest nie tylko najbardziej zalecaną metodą, najbardziej efektywną, czy najlepszą. Jest to również metoda pozbawiona wad, jakie posiada stylowanie inline czy stylowanie wewnętrzne.
Najważniejsze zalety stylowania zewnętrznego:
- Separacja treści od prezentacji — Oddzielenie kodu HTML od CSS ułatwia zarządzanie i utrzymanie strony.
- Łatwe aktualizacje — Stylowanie zewnętrzne pozwala na szybkie wprowadzanie zmian we wzornictwie strony, ponieważ wystarczy zmodyfikować jeden plik CSS, zamiast przeszukiwać wiele plików HTML.
- Skalowalność — Używanie zewnętrznych arkuszy styli pozwala na łatwe stosowanie tych samych styli na wielu stronach, co jest szczególnie przydatne w przypadku dużych witryn.
- Oszczędność transferu — Przeglądarki mogą buforować zewnętrzne pliki CSS, co zmniejsza ilość pobieranych danych i przyspiesza wczytywanie strony.
Przykład użycia stylowania zewnętrznego:
Plik CSS:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
color: #666;
}
.container {
width: 80%;
margin: auto;
}Plik HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład stylowania zewnętrznego</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Nagłówek strony</h1>
<p>Akapit z tekstem na stronie.</p>
</div>
</body>
</html>W powyższym przykładzie, style są zdefiniowane w osobnym pliku CSS — style.css, który jest dołączany do strony HTML za pomocą tagu <link>. Dzięki czemu kod HTML jest czytelniejszy, a zarządzanie stylami staje się znacznie prostsze.
Warto zapamiętać
Stylowanie zewnętrzne to metoda stosowania styli CSS, w której style są umieszczane w osobnym pliku z rozszerzeniem .css i dołączane do strony HTML za pomocą tagu <link>. Jest to najbardziej zalecana metoda stylowania, ponieważ oferuje szereg zalet, takich jak separacja treści od prezentacji, łatwe aktualizacje, skalowalność i oszczędność transferu. Dzięki zewnętrznym arkuszom styli, kod HTML staje się czytelniejszy, a zarządzanie i utrzymanie witryny internetowej jest znacznie uproszczone.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
