Kod języka CSS można umieścić wewnątrz kodu HTML, posługując się znacznikiem

Wyjaśnienie

Znacznik służy do umieszczania wewnętrznego kodu CSS bezpośrednio w dokumencie HTML, dlatego właśnie on jest właściwą odpowiedzią. Najczęściej wpisuje się go w sekcji <head>, czyli tam, gdzie przeglądarka znajduje informacje techniczne o stronie zanim wyrenderuje treść. W praktyce wygląda to np. tak: <style> body { font-family: Arial; background-color: #f5f5f5; } .menu { display: flex; }. Dzięki temu można szybko nadać wygląd elementom strony: kolory, marginesy, układ, rozmiary czcionek czy zachowanie bloków. Moim zdaniem to bardzo dobre rozwiązanie przy małych przykładach, ćwiczeniach i prostych podstronach, bo wszystko jest w jednym pliku i łatwo to ogarnąć. W większych projektach branżową dobrą praktyką jest jednak przenoszenie CSS do osobnego pliku .css i podłączanie go przez . Ułatwia to utrzymanie kodu, ponowne użycie stylów i pozwala przeglądarce buforować arkusz stylów. Warto też pamiętać, że nie tworzy treści widocznej na stronie, tylko definiuje reguły wyglądu zgodnie z zasadami kaskadowości CSS. W tym pytaniu łatwo pomylić miejsce, w którym zwykle umieszcza się style, z samym znacznikiem odpowiedzialnym za zapis kodu CSS. Sekcja <head> jest bardzo ważna, bo zawiera metadane dokumentu, tytuł strony, odwołania do plików zewnętrznych i właśnie tam najczęściej wkłada się blok <style>. Ale sam <head> nie jest znacznikiem CSS i nie służy do pisania reguł typu body { color: black; }. Jest raczej kontenerem organizacyjnym dla informacji o dokumencie. Podobnie <body> odpowiada za właściwą zawartość strony widoczną dla użytkownika: nagłówki, akapity, obrazy, formularze, listy czy przyciski. Umieszczanie tam definicji stylów nie jest typowym ani zalecanym sposobem porządkowania kodu, nawet jeśli przeglądarki czasem potrafią być pobłażliwe dla różnych dziwnych zapisów. Znacznik <meta> ma jeszcze inne zadanie: opisuje ustawienia i informacje o dokumencie, na przykład kodowanie znaków przez charset=UTF-8 albo responsywność przez viewport. Nie zawiera reguł CSS. Typowy błąd myślowy polega na tym, że skoro CSS wpływa na całą stronę, to ktoś wybiera znacznik ogólny, taki jak <head> albo <body>. W standardowej praktyce HTML i CSS reguły stylów wewnętrznych zapisuje się jednak w elemencie <style>, najlepiej w części <head>. To rozdziela strukturę dokumentu od jego prezentacji, a kod jest czytelniejszy i mniej chaotyczny, co naprawdę ma znaczenie przy większych zadaniach.