Aby ustawić kolor tła w HTML, należy użyć stylów CSS, korzystając z właściwości background-color. Można to zrobić na kilka sposobów: bezpośrednio w znaczniku HTML, za pomocą wbudowanego (wewnętrznego) arkusza stylów lub poprzez zewnętrzny plik CSS.
Podstawowe ustawienie koloru tła dla całej strony
Najprostszym rozwiązaniem jest dodanie atrybutu stylu do znacznika <body>. Na przykład:
<body style="background-color: lightblue;">
<h1>Moja strona</h1>
<p>Przykładowy tekst.</p>
</body>
W powyższym przykładzie całe tło strony będzie miało jasnoniebieski kolor.
Ustawienie koloru tła przy użyciu wewnętrznego arkusza stylów
Style można też dodać w sekcji <head> przy użyciu znacznika <style>. Pozwala to na bardziej uporządkowaną strukturę:
<head>
<style>
body { background-color: #f0e68c; /* jasny beżowy */ color: #333; /* ciemnoszary tekst */ }
</style>
</head>
<body>
<h1>Poradnik: Kolor tła</h1>
</body>
To rozwiązanie umożliwia ustawianie tła nie tylko dla całej strony, ale także dla wybranych elementów.
Zewnętrzny arkusz stylów (zalecany dla większych projektów)
Przy większych stronach lepiej stosować oddzielne pliki CSS. Przykładowy kod w pliku style.css:
body {
background-color: white;
}
h1 {
background-color: #4caf50;
color: white;
padding: 10px;
}
A w pliku HTML w sekcji <head> należy dodać odwołanie do arkusza:
<link rel="stylesheet" href="style.css">
Ustawianie koloru tła dla pojedynczych elementów
Kolor tła można nadać także dowolnemu elementowi, np. nagłówkowi lub akapitowi:
<h2 style="background-color: yellow;">Nagłówek na żółtym tle</h2>
<p style="background-color: #ffcccc;">Akapit na jasnoczerwonym tle</p>
Formaty zapisu kolorów
Kolor w CSS można określić na kilka sposobów:
- Nazwą koloru –
background-color: green;; - W systemie szesnastkowym (HEX) –
background-color: #00ff00;; - W formacie RGB –
background-color: rgb(0,255,0);; - W formacie RGBA (z przezroczystością):
background-color: rgba(0,255,0,0.3);.
Przydatne wskazówki i dobre praktyki
- Zaleca się dobierać kolor tła w parze z kolorem tekstu, aby zapewnić czytelność (np. jasne tło – ciemny tekst),
- Tło można ustawić dla dowolnego elementu strony, nadając mu indywidualny charakter,
- Jeżeli planujesz stylować wiele elementów, warto korzystać z klas CSS zamiast powielanych atrybutów
stylew kodzie HTML, - Poza
background-color, można użyć również właściwościbackground, która poza kolorem pozwala ustawić obrazek w tle oraz tło gradientowe.
Przykłady zaawansowane
Przykład – tło gradientowe
body {
background: linear-gradient(to right, #ffecd2, #fcb69f);
}
Przykład – tło tylko dla części strony
<div style="background-color: #e0e0e0; padding: 20px;">
<h2>Dodatkowa sekcja na szarym tle</h2>
<p>Fragment o innym kolorze tła niż reszta strony.</p>
</div>
Dzięki tym metodom można w prosty sposób poprawić wygląd strony internetowej i zwiększyć czytelność treści, dostosowując kolor tła do swoich potrzeb.
