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
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
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>
).
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>