CSS (Cascading Style Sheets) jest językiem używanym do opisywania prezentacji dokumentu napisanego w HTML. CSS umożliwia kontrolę nad wyglądem strony internetowej, włącznie z layoutem, kolorami i czcionkami. Istnieją trzy główne sposoby dołączania CSS do dokumentów HTML: za pomocą zewnętrznych plików CSS, tagu <style> wewnątrz dokumentu HTML oraz stylów inline bezpośrednio w tagach HTML. Każda z tych metod ma swoje zastosowania, zalety i wady.
Zewnętrzne pliki CSS
Zewnętrzne pliki CSS to najczęściej używana metoda dołączania stylów, pozwalająca na oddzielenie treści od prezentacji. Styl zdefiniowany w zewnętrznym pliku CSS może być używany przez wiele stron internetowych, co ułatwia utrzymanie spójności i zmniejsza redundancję kodu.
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład z zewnętrznym CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Witaj, świecie!</h1>
<p>To jest przykład strony z zewnętrznym plikiem CSS.</p>
</body>
</html>
W pliku styles.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-size: 20px;
}
Tag <style>
Stylowanie za pomocą tagu <style> umieszczanego w sekcji <head> dokumentu HTML jest przydatne, gdy chcemy zastosować style tylko na jednej stronie internetowej.
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład z tagiem style</title>
<style>
.text-center {
text-align: center;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="text-center">Nagłówek</h1>
<p class="highlight">Ten paragraf jest wyróżniony.</p>
</body>
</html>
Style Inline
Stylowanie inline polega na umieszczaniu stylów bezpośrednio w tagach HTML za pomocą atrybutu style. Jest to najmniej zalecana metoda ze względu na trudności w utrzymaniu i brak możliwości ponownego użycia kodu.
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład ze stylem inline</title>
</head>
<body>
<h1 style="color: red; text-align: center;">Nagłówek</h1>
<p style="color: green;">Ten paragraf ma zielony kolor tekstu.</p>
</body>
</html>
Podsumowanie
Wybór metody dołączania CSS do HTML zależy od wielu czynników, w tym od rozmiaru projektu, jego złożoności oraz preferencji dewelopera. Zewnętrzne pliki CSS są najbardziej efektywne dla dużych projektów wymagających spójności stylów. Tag <style> jest dobrym rozwiązaniem dla stylów specyficznych dla jednej strony, natomiast style inline mogą być użyteczne dla szybkich modyfikacji pojedynczych elementów.