HTML z CSS

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.

Scroll to Top