Wewnętrzny arkusz stylów (ang. internal stylesheet) należy umieścić w sekcji
dokumentu HTML – dokładniej, pomiędzy znacznikami<head> i </head>, wewnątrz znacznika <style>. Tylko w tej części dokumentu arkusz stylów zostanie prawidłowo rozpoznany przez przeglądarki.
Struktura dokumentu HTML z wewnętrznym arkuszem stylów
Schematyczna struktura powinna wyglądać następująco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład z arkuszem stylów</title>
<style>
/* Tutaj umieszczamy reguły CSS */
body { background: #f0f0f0; font-family: Arial, sans-serif; }
h1 { color: steelblue; text-align: center; }
p { font-size: 18px; line-height: 1.5; }
</style>
</head>
<body>
<h1>Przykład zastosowania wewnętrznego arkusza stylów</h1>
<p> Ten akapit jest stylizowany przez reguły CSS umieszczone w nagłówku dokumentu. </p>
</body>
</html>
Szczegółowe omówienie
- Znacznik
<style>– to wewnątrz niego umieszczasz reguły CSS; uwaga:<style>musi znajdować się wyłącznie w części<head>, niepoprawne jest umiejscowienie go w części<body>dokumentu.; - Modyfikowanie wyglądu strony – wewnątrz
<style>możesz umieścić dowolne zasady CSS, które będą miały zastosowanie do całego dokumentu.
Przykłady zastosowań wewnętrznego arkusza stylów
- Dostosowanie wyglądu pojedynczej strony – gdy dana strona internetowa ma wymagać odmiennego wystroju niż reszta witryny, np. specjalna podstrona wydarzenia lub landing page.;
- Szybkie testowanie i prototypowanie – wewnętrzny arkusz stylów jest bardzo wygodny podczas tworzenia i testowania wyglądu konkretnego dokumentu bez konieczności modyfikowania zewnętrznych plików CSS.
Przykład – specjalne stylowanie tylko jednej strony –
<head>
...
<style>
.promocja {
background: yellow;
color: red;
font-size: 2em;
padding: 10px;
border-radius: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="promocja">Mega Promocja tylko dzisiaj!</div>
</body>
Kiedy warto używać wewnętrznego arkusza stylów?
- Przy stronach, które mają unikalny wygląd niepowtarzający się w innych miejscach witryny,
- tam, gdzie zależy Ci na szybkim wdrażaniu zmian bez naruszania głównych arkuszy CSS,
- podczas warsztatów, nauki i eksperymentów – prosta edycja kodu i natychmiastowy podgląd efektów.
Najczęstsze błędy i uwagi
- Nie umieszczaj znacznika
<style>w części<body>dokumentu – styl nie zostanie rozpoznany i przeglądarka zignoruje reguły CSS.; - Wewnętrzny arkusz stylów powinien być jeden na dokument – technicznie można mieć ich więcej, jednak dla przejrzystości kodu zaleca się jeden blok
<style>w<head>.; - Dla rozbudowanych serwisów zaleca się korzystanie z zewnętrznych arkuszy stylów – ułatwia to zarządzanie i optymalizuje szybkość ładowania strony.
Podsumowując – wewnętrzny arkusz stylów zawsze umieszczaj w sekcji <head> dokumentu HTML, wewnątrz znacznika <style>. To idealne rozwiązanie dla pojedynczych stron i w fazie prototypowania. Stosując się do tej zasady, zapewnisz prawidłową interpretację stylów przez każdą przeglądarkę, a kod Twojej strony pozostanie przejrzysty i uporządkowany.
