Jeśli zaczynasz swoją przygodę z tworzeniem stron internetowych, pewnie już spotkałeś się z terminem CSS. To on odpowiada za to, jak wygląda Twoja strona — kolory, czcionki, układ, efekty wizualne. Bez niego każda witryna wyglądałaby jak tekst na białym tle. W tym artykule pokażę Ci, jak osadzić CSS w pliku HTML. Spokojnie, nie musisz być ekspertem — wyjaśnię wszystko krok po kroku w prosty sposób.
Co to jest CSS i dlaczego jest ważny?
CSS, czyli Cascading Style Sheets, to język, który pozwala Ci kontrolować wygląd elementów na stronie. HTML tworzy strukturę (np. nagłówki, paragrafy, listy), a CSS dodaje im „życia”.
Przykład:
HTML bez CSS:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona bez stylu</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest zwykły tekst.</p>
</body>
</html>
Wygląda nudno, prawda?
HTML z CSS:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Stylowa strona</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #007bff;
}
</style>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest tekst z stylem.</p>
</body>
</html>
Różnica jest ogromna! W dalszej części pokażę Ci, jak w praktyce używać CSS na różne sposoby.
Trzy sposoby osadzania CSS
1. Styl wewnętrzny (inline styles)
To najprostszy sposób na dodanie CSS. Stylujesz elementy bezpośrednio w tagach HTML za pomocą atrybutu style.
Przykład:
<p style="color: red; font-size: 20px;">Ten tekst jest czerwony i większy!</p>
Zalety:
- Szybki i łatwy w prostych projektach.
- Działa natychmiast na jednym elemencie.
Wady:
- Kod szybko staje się nieczytelny.
- Brak możliwości wielokrotnego użycia tych samych stylów.
2. Styl w sekcji <style>
Drugi sposób to osadzanie stylów w sekcji <style> w nagłówku dokumentu HTML.
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona z CSS</title>
<style>
body {
background-color: #f4f4f4;
font-family: Verdana, sans-serif;
}
h1 {
color: #5a67d8;
text-align: center;
}
p {
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Stylizacja w akcji</h1>
<p>Teraz już wiesz, jak działa styl w nagłówku!</p>
</body>
</html>
Zalety:
- Wszystkie style są w jednym miejscu (w nagłówku).
- Można stylizować wiele elementów naraz.
Wady:
- Styl działa tylko w obrębie jednego pliku HTML.
3. Zewnętrzny plik CSS
Najlepszym rozwiązaniem w większych projektach jest użycie oddzielnego pliku CSS. Dzięki temu Twój kod HTML pozostaje czysty i czytelny.
Jak to zrobić?
- Utwórz plik CSS, np.
style.css. - Dodaj link do pliku CSS w sekcji
<head>w pliku HTML.
Przykład:
Plik CSS (style.css):
body {
background-color: #fff5e6;
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #ff5733;
text-align: center;
padding: 20px 0;
}
p {
color: #333;
font-size: 18px;
margin: 10px;
}
Plik HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Zewnętrzny CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Strona ze stylem</h1>
<p>Stylizacja zewnętrzna działa świetnie!</p>
</body>
</html>
Zalety:
- Stylizacja jest oddzielona od treści HTML.
- Możesz użyć tego samego pliku CSS w wielu stronach.
Wady:
- Musisz zarządzać dodatkowym plikiem.
Kilka praktycznych wskazówek
- Używaj klas i identyfikatorów:
Jeśli chcesz stylizować konkretny element, użyj klasy (class) lub identyfikatora (id).Przykład:htmlSkopiuj kod<p class="highlight">Ten tekst ma specjalny styl.</p> <p id="important">To jest najważniejszy tekst.</p>CSS:cssSkopiuj kod.highlight { color: blue; font-weight: bold; } #important { color: red; text-transform: uppercase; } - Używaj resetu CSS:
Przeglądarki stosują domyślne style. Jeśli chcesz pełną kontrolę nad wyglądem, użyj resetu, np.:cssSkopiuj kod* { margin: 0; padding: 0; box-sizing: border-box; } - Testuj w przeglądarce:
Zawsze sprawdzaj swoją stronę w różnych przeglądarkach, żeby upewnić się, że wszystko wygląda, jak powinno. - Unikaj stylów inline:
Są dobre na start, ale w dłuższej perspektywie utrudniają zarządzanie kodem.
Jak widzisz, osadzanie CSS w HTML to nic trudnego! Możesz używać stylów inline, sekcji <style>, albo najlepiej — zewnętrznego pliku CSS. Każda metoda ma swoje zastosowanie, a wybór zależy od projektu i Twojego doświadczenia.