Ostatnia aktualizacja 27 listopada, 2023
CSS, czyli Cascading Style Sheets, to język używany do opisu wyglądu i formatowania dokumentu napisanego w HTML (HyperText Markup Language). CSS pozwala twórcom stron internetowych na efektywne sterowanie wyglądem stron, takim jak układ, kolory, czcionki, a nawet animacje. Dowiedz się jak podłączyć CSS do HTML.
Podstawy przede wszystkim. Co to jest CSS?
Zanim przejdziemy do opisu, jak podłączyć CSS do HTML, dobrze jest najpierw zrozumieć, co to jest CSS.
CSS to język służący do opisywania wyglądu i formatowania stron internetowych. Gdy HTML jest odpowiedzialny za strukturę strony, CSS jest odpowiedzialny za jej wygląd. Możemy przyrównać HTML do kości naszego ciała, a CSS – do skóry i ubrań, które na nie nałożymy. Dość obrazowo, prawda? Mamy nadzieję, że również zrozumiale.
Sprawdź: Kolory HTML
CSS oferuje twórcom stron internetowych dużo większą kontrolę nad wyglądem stron, niż HTML sam w sobie. Dzięki CSS możemy definiować style dla różnych elementów HTML i zastosować je na wielu stronach jednocześnie, co zapewnia spójność wyglądu i pozwala na łatwe wprowadzanie zmian.
Jak podłączyć CSS do HTML – trzy sposoby
Istnieją trzy główne sposoby na podłączenie CSS do HTML:
- Za pomocą tagu style wewnątrz dokumentu HTML (nazywane to jest stylem wewnętrznym)
- Za pomocą atrybutu style bezpośrednio w tagach HTML (styl inline)
- Albo za pomocą zewnętrznego pliku CSS, do którego linkujemy w dokumencie HTML
Styl wewnętrzny
Możemy umieścić CSS bezpośrednio w naszym pliku HTML za pomocą tagu style. Styl ten wpływa na cały dokument HTML i umieszcza się go zwykle w sekcji dokumentu. Wygląda to następująco:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>Tutaj znajdziesz mnóstwo ciekawych informacji.</p>
</body>
</html>W powyższym przykładzie CSS określa, że kolor tła całego dokumentu ma być jasnoniebieski, a tytuły pierwszego poziomu (h1) mają być białe i wyśrodkowane.
Styl inline
Styl inline polega na umieszczaniu CSS bezpośrednio w tagach HTML za pomocą atrybutu style. Ten sposób jest mniej zalecany, ponieważ zasada separacji struktury (HTML) od prezentacji
(CSS) jest dobrym zwyczajem w projektowaniu stron internetowych. Ponadto, style inline mają najwyższy priorytet, co może prowadzić do problemów z nadpisaniem tych styli. Mimo to, mogą być przydatne w pewnych sytuacjach. Oto przykład:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:white; text-align:center; background-color:lightblue;">Witaj na mojej stronie!</h1>
<p style="color:gray;">Tutaj znajdziesz mnóstwo ciekawych informacji.</p>
</body>
</html>W powyższym przykładzie CSS jest używany bezpośrednio w tagach h1 i p, zmieniając kolor tekstu, wyrównanie i kolor tła dla h1 oraz kolor tekstu dla p.
Styl zewnętrzny
Najbardziej zalecaną metodą jest jednak użycie zewnętrznego pliku CSS. Dzięki temu możemy utrzymać nasz kod HTML czystym i czytelnym, a także reużywać ten sam plik CSS na wielu stronach.
Zobacz: HTML dla zielonych
Do połączenia zewnętrznego pliku CSS z naszym dokumentem HTML używamy tagu , który umieszczamy w sekcji naszego dokumentu. Wygląda to tak:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>Tutaj znajdziesz mnóstwo ciekawych informacji.</p>
</body>
</html>W powyższym przykładzie mamy plik styles.css, który zawiera wszystkie nasze style CSS.
Przykładowa zawartość tego pliku może wyglądać tak:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
color: gray;
}Jak podłączyć CSS do HTML – podsumowanie
Podłączanie CSS do HTML to podstawowy krok w procesie tworzenia atrakcyjnych i funkcjonalnych stron internetowych. CSS oferuje szerokie możliwości dostosowania wyglądu strony, a dzięki trzem różnym metodom podłączenia CSS do HTML, twórcy stron internetowych mogą wybrać tę, która najlepiej pasuje do ich potrzeb.
Sprawdź: Czym są CSS-y?
Jednak należy pamiętać, że zasada separacji struktury od prezentacji jest kluczowa dla utrzymania porządku i czytelności kodu, a także dla efektywnego zarządzania stylem na większych stronach. Dlatego, choć style inline i wewnętrzne mogą być przydatne w pewnych sytuacjach, zdecydowanie zaleca się użycie zewnętrznych plików CSS tam, gdzie to tylko możliwe.
Teraz już wiesz jak podłączyć CSS do HTML. Pamiętaj, że kluczem do efektywnej pracy z CSS i HTML jest praktyka. Zastosuj te techniki w swoich projektach.
📝 Sprawdź oświadczenie dotyczące etyki pracy na Enter The Code. Naszym treściom możesz zaufać.
