Cascading Style Sheets (CSS) są kluczowym narzędziem projektowania stron internetowych, umożliwiającym precyzyjne kontrolowanie wyglądu i układu elementów HTML. W tym obszernym artykule zgłębimy podstawy CSS, przybliżając selektory, właściwości, kaskadowość oraz wyjaśniając ich zastosowanie na podstawie konkretnych przykładów.

Wprowadzenie do CSS

CSS jest językiem stylów używanym do definiowania wyglądu dokumentów HTML. Pozwala on na separację struktury i prezentacji strony, co ułatwia utrzymanie spójności wyglądu na wielu stronach.

Selektory CSS

Selektory to kluczowe narzędzie w CSS, pozwalające na precyzyjne określenie elementów HTML, do których mają zostać zastosowane style. Przyjrzyjmy się przykładowemu selektorowi klasy.

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}

W powyższym przykładzie .button jest selektorem klasy, który stosuje zestaw stylów do wszystkich elementów HTML o klasie “button”. Style te definiują wygląd przycisków na stronie.

Wyjaśnienie każdej linii kodu CSS

• background-color: #4CAF50; – Określa kolor tła przycisku. W tym przypadku używamy koloru zdefiniowanego w formacie szesnastkowym (#4CAF50), który reprezentuje zielony odcień.
• border: none; – Usuwa obramowanie przycisku. Wartość “none” oznacza brak obramowania.
• color: white; – Określa kolor tekstu na przycisku. W tym przypadku tekst będzie biały.
• padding: 10px 20px; – Określa wewnętrzny odstęp (w pikselach) między zawartością przycisku a jego obramowaniem. W tym przypadku jest to 10 pikseli na górze i na dole oraz 20 pikseli po lewej i prawej stronie.
• text-align: center; – Określa wyrównanie tekstu na przycisku. W tym przypadku tekst będzie wyśrodkowany.
• text-decoration: none; – Określa dekorację tekstu, taką jak podkreślenie. W tym przypadku wartość “none” usuwa wszystkie dekoracje tekstu.
• display: inline-block; – Określa sposób wyświetlania elementu. W przypadku “inline-block” element zachowuje się jak element inline, ale zachowuje również właściwości blokowe, takie jak możliwość ustawienia wysokości i szerokości.
• font-size: 16px; – Określa rozmiar czcionki tekstu na przycisku. W tym przypadku jest to 16 pikseli.
• margin: 4px 2px; – Określa zewnętrzny odstęp między przyciskiem a innymi elementami na stronie. Wartość “4px 2px” oznacza, że odstęp będzie wynosił 4 piksele na górze i na dole oraz 2 piksele po bokach.
• cursor: pointer; – Określa wygląd kursora, gdy najedziemy na przycisk. W tym przypadku kursor przybierze postać wskaźnika (standardowy kursor wskazujący na interaktywny element).
• border-radius: 8px; – Określa promień zaokrąglenia rogów przycisku. Wartość “8px” oznacza, że rogi będą zaokrąglone na 8 pikseli.

Właściwości CSS

Właściwości CSS definiują wygląd i zachowanie elementów HTML. Oto przykład definicji stylu dla tekstu.

.text {
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

Właściwości te określają kolor tekstu, czcionkę, rozmiar czcionki oraz odstęp między wierszami.

Wyjaśnienie każdej linii kodu CSS

• .text { – Rozpoczyna definicję stylu dla klasy o nazwie “text”. Wszystkie elementy HTML o tej klasie będą miały zastosowane te style.
• color: #333; – Określa kolor tekstu. W tym przypadku używamy koloru zdefiniowanego w formacie szesnastkowym (#333), który reprezentuje ciemnoszarą barwę.
• font-family: Arial, sans-serif; – Określa rodzaj czcionki. W przypadku braku czcionki Arial, przeglądarka użyje czcionki bezszeryfowej (sans-serif) jako alternatywy. Jest to ważne dla zapewnienia spójnego wyglądu tekstu na różnych platformach.
• font-size: 16px; – Określa rozmiar czcionki tekstu. W tym przypadku jest to 16 pikseli.
• line-height: 1.5; – Określa odstęp między wierszami tekstu. Wartość 1.5 oznacza, że odstęp między wierszami będzie 1.5 raza większy niż rozmiar czcionki. To pomaga w czytelności i estetyce tekstu na stronie.

Przykłady Stylizacji

Stylizacja Nagłówka

        h1 {
            color: blue;
            font-size: 24px;
            text-align: center;
        }

W powyższym przykładzie zastosowano stylizację nagłówka <h1>, nadając mu niebieski kolor, rozmiar czcionki 24px oraz wyśrodkowanie tekstu.

Stylizacja Nagłówka – umieszczenie w HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>

<h1>Witaj, Świecie!</h1>

</body>
</html>

W powyższym przykładzie zastosowano stylizację nagłówka <h1>, nadając mu niebieski kolor, rozmiar czcionki 24px oraz wyśrodkowanie tekstu.

Dodawanie Pliku CSS do Dokumentu HTML

Aby użyć pliku CSS, należy go najpierw utworzyć. Następnie można dodać odwołanie do tego pliku w sekcji <head> dokumentu HTML za pomocą elementu <link>.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- Zawartość strony -->
</body>
</html>

W powyższym przykładzie href="styles.css" wskazuje na ścieżkę do pliku CSS. Plik ten musi znajdować się w tym samym katalogu co dokument HTML lub w innym miejscu, wskazanym w odnośniku.

Poprzez zastosowanie selektorów, właściwości i przykładów stylizacji CSS, można skutecznie kontrolować wygląd i układ elementów na stronie internetowej. Dzięki temu artykułowi zyskasz solidne podstawy w zakresie stylizacji stron za pomocą CSS.