Jak podłączyć CSS do HTML?
Jeżeli tworzycie swoje pierwsze strony internetowe z pomocą HTML i CSS, prawdopodobnie zastanawiacie się, w jaki sposób możecie podłączyć swój kod CSS do HTML, tak by określone przez Was style zaczęły działać.
Zaprezentuję to w tym krótkim poradniku, pokazując to na kilku przykładach.
Spis treści
Sposób 1: Podłączenie pliku CSS
Najbardziej uniwersalnym i w większości przypadków najlepszym sposobem jest podłączenie do naszego pliku HTML konkretnego pliku CSS.
W tym celu wystarczy umieścić pomiędzy tagami <head> i </head> następujący kod:
<link href="sciezka/do/pliku/plik.css" rel="stylesheet">
Odpowiednio zmieniając ścieżkę do pliku, np. na assets/css/style.css jeżeli plik CSS znajduje się w następujących folderach względem danego pliku HTML.
Oto praktyczny przykład:
Stwórzcie w tym samym folderze pliki o nazwach index.html i style.css.
Ustawcie w nich następujący kod:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testowa Strona</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Witaj Świecie!</h1>
</body>
</html>body {
background: blue;
color: #fff;
padding: 20%;
text-align: center;
}Tak powinien wyglądać gotowy rezultat:
Zobacz także: Jak zrobić prostą stronę internetową w HTML? Krok po Kroku
Sposób 2: Osadzenie stylów CSS w pliku HTML
Alternatywnie, możecie też osadzić style CSS w pliku HTML pomiędzy znacznikami <style> i </style>. Ten sposób jest o tyle mniej wygodny, że jeżeli będziecie mieli wiele podstron, każdą zmianę w CSS będziecie musieli wprowadzać na każdej z nich z osobna (chyba że poradzicie sobie z tym za pomocą np. PHP, ale to w większości przypadków niepotrzebna sztuka dla sztuki).
W niektórych przypadkach, gdy chcecie jednak nadać pewne style tylko danej podstronie, albo macie naprawdę mały projekt, ten sposób też jest używany.
Oto praktyczny przykład:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testowa Strona</title>
</head>
<body>
<style>
body {
background: blue;
color: #fff;
padding: 20%;
text-align: center;
}
</style>
<h1>Witaj Świecie!</h1>
</body>
</html>Rezultat powinien wyglądać identycznie jak w przypadku dołączania osobnego arkusza stylów. W tym przypadku po prostu zamiast dołączania go, osadzamy CSS wewnątrz kodu HTML (pomiędzy znacznikami <style> i </style>).
Sposób 3: Osadzanie stylów CSS w poszczególnych tagach HTML
Czasami używany jest także sposób, który pozwala nam określić CSS tylko dla danego elementu HTML. W tym celu wystarczy przypisać poszczególne wartości CSS do atrybutu style=”” danego elementu. Dla przykładu, w ten sposób możemy zrobić sobie zielony button — jak zaraz zobaczycie, nie musimy się wtedy odwoływać do danej klasy, ID, czy typu elementu, a po prostu go ostylowujemy. Zazwyczaj jest to mało wygodny i czytelny sposób, ale w praktyce w niektórych sytuacjach warto z niego skorzystać.
Przykładowo:
<button style="background: green; color: white">Zielony przycisk</button>
Oto jak może wyglądać przykładowy plik z osadzonym w ten sposób kodem CSS:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testowa Strona</title>
</head>
<body style="background: #eee; color: #fff; padding: 20%; text-align: center;">
<h1 style="color: red">Witaj Świecie!</h1>
</body>
</html>
