<style>
Arkusz stylów CSS wpisany bezpośrednio w dokument HTML.
- Wyświetlanie
- none
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Kod CSS
Przykład
#<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Karta kursu</title>
<style>
.course {
max-width: 280px;
padding: 16px;
border: 2px solid #a78bfa;
border-radius: 12px;
}
.course h2 {
margin: 0 0 8px;
color: #a78bfa;
}
.course p {
margin: 0;
}
</style>
</head>
<body>
<article class="course">
<h2>Kurs CSS</h2>
<p>Kolory, odstępy i układy stron w 12 lekcjach.</p>
</article>
</body>
</html>Definicja i zastosowanie
#Element <style> zawiera reguły CSS, które przeglądarka stosuje do całej strony. Jego miejsce jest w <head>. Przeglądarki zastosują też style wpisane w <body>, ale według standardu HTML to błąd.
Style wewnętrzne sprawdzają się w małych projektach, prototypach i pojedynczych stronach, a także wtedy, gdy chcesz wstawić do HTML tylko najpilniejsze style potrzebne do pokazania pierwszego ekranu. Przy większej stronie lepszy jest osobny plik dołączony przez <link rel="stylesheet">: przeglądarka pobiera go raz i używa na wszystkich podstronach, a zawartość <style> przychodzi od nowa z każdym dokumentem.
O tym, która reguła wygra, decyduje kaskada. Przy tej samej specyficzności wygrywa reguła zapisana później, więc <style> umieszczony po <link> może nadpisać style z pliku. Z kolei atrybut style na konkretnym elemencie jest silniejszy od reguł z <style>.
Składnia
#<style>
selektor {
właściwość: wartość;
}
</style>Atrybuty
#zapytanie o media
Stosuje style tylko wtedy, gdy warunek jest spełniony, np. przy drukowaniu (print) albo na wąskich ekranach. Bez tego atrybutu style obowiązują zawsze.type
text/css (zbędny)
W starszym kodzie spotkasztype="text/css". To jedyna dozwolona wartość i zarazem domyślna, więc atrybut możesz po prostu pominąć.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#media
zapytanie o mediaStosuje style tylko wtedy, gdy warunek jest spełniony, np. przy drukowaniu (print) albo na wąskich ekranach. Bez tego atrybutu style obowiązują zawsze.
<head>
<style>
body { font-family: system-ui, sans-serif; }
</style>
<style media="print">
nav, .ad { display: none; }
body { color: black; background: white; }
</style>
</head>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
style {
display: none;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Gdy style rosną i dotyczą wielu podstron, przenieś je do osobnego pliku
.css. - Nie rozrzucaj stylów po trzech miejscach naraz (plik,
<style>i atrybutstyle). Szukanie, skąd bierze się kolor przycisku, zajmie wtedy więcej czasu niż jego zmiana. - Żeby sprawdzić, które reguły działają na element, kliknij go prawym przyciskiem myszy i wybierz „Zbadaj”. Narzędzia deweloperskie pokażą wszystkie pasujące reguły.
Powiązane hasła
#- <link>Łączy dokument z zewnętrznym zasobem: arkuszem stylów, ikoną strony, fontem albo inną wersją językową.
- <head>Niewidoczna część dokumentu z metadanymi: tytułem, kodowaniem znaków, opisem, stylami i skryptami.
- <script>Osadza kod JavaScript w stronie albo wczytuje go z pliku, żeby dodać stronie zachowanie.
- <noscript>Treść, którą przeglądarka pokaże tylko wtedy, gdy JavaScript jest wyłączony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.