Znacznik <style> w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Znacznik `<style>` w HTML

Znacznik <style> służy do umieszczania wewnętrznego arkusza stylów CSS bezpośrednio w dokumencie HTML. Najczęściej zapisuje się go w sekcji nagłówkowej dokumentu, czyli wewnątrz znacznika <head>.

Gdzie umieszcza się `<style>`?

Poprawne miejsce dla wewnętrznego arkusza stylów to:

<head>
  <style>
    body {
      background-color: lightgray;
    }

    h1 {
      color: navy;
    }
  </style>
</head>

Dzięki temu przeglądarka zna reguły CSS jeszcze przed wyświetleniem treści strony znajdującej się w sekcji <body>.

Do czego służy wewnętrzny arkusz stylów?

Wewnętrzny arkusz stylów przydaje się, gdy style dotyczą tylko jednego dokumentu HTML. Pozwala zapisać wiele reguł CSS w jednym miejscu, bez używania zewnętrznego pliku .css.

Różnica względem stylu liniowego

Styl liniowy zapisuje się bezpośrednio w atrybucie style konkretnego elementu:

<p style="color: red;">Tekst</p>

Natomiast znacznik <style> zawiera reguły CSS dla wielu elementów:

<style>
  p {
    color: red;
  }
</style>

Najważniejsze na egzaminie

Wewnętrzny arkusz stylów umieszcza się w sekcji <head> dokumentu HTML, a nie w treści strony, skrypcie JavaScript ani bezpośrednio w znaczniku elementu.