Wewnętrzny CSS

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 7 z 76.

Wewnętrzny CSS to metoda dodawania stylów CSS do dokumentu HTML poprzez umieszczenie ich w tagu <style> w sekcji <head> dokumentu. Dzięki temu możesz stosować style do wielu elementów na jednej stronie bez potrzeby korzystania z zewnętrznych arkuszy stylów. Wewnętrzny CSS przydaje się do stylizowania pojedynczego dokumentu lub szybkiego wprowadzania zmian w stylach.

Oto podstawowa składnia używania wewnętrznego CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

W tym przykładzie tag <style> zawiera reguły CSS, które ustawiają jasnoniebieski kolor tła elementu body, niebieski kolor tekstu elementu p (akapitu) oraz rozmiar czcionki na 16 pikseli. Te style będą stosowane do wszystkich elementów w dokumencie HTML.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML. Użyj wewnętrznego CSS, aby nadać dokumentowi następujące właściwości:

Ustaw kolor tła elementu body na lightgreen.
Ustaw kolor tekstu wszystkich nagłówków h1 na red.
Ustaw rozmiar czcionki wszystkich akapitów (p) na 18px.

Otrzymujesz początkowy kod CSS.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>