Dahili CSS

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 7 / 76.

Dahili CSS, CSS stillerini belgenin <head> bölümündeki bir <style> etiketi içine yerleştirerek bir HTML belgesine ekleme yöntemidir. Bu yaklaşım, harici stil sayfalarına ihtiyaç duymadan tek bir sayfadaki birden fazla öğeye stil uygulamanıza olanak tanır. Dahili CSS, tek bir belgeyi stillendirmek veya hızlı stil değişiklikleri yapmak için kullanışlıdır.

İşte dahili CSS kullanmak için temel sözdizimi:

<!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>

Bu örnekte, <style> etiketi, body öğesinin arka plan rengini açık maviye, p (paragraf) öğesinin rengini maviye ve yazı tipi boyutunu 16 piksele ayarlayan CSS kuralları içerir. Bu stiller, HTML belgesi içindeki tüm öğelere uygulanacaktır.

Görev

Kolay

Size bir HTML belgesi verilmiştir. Belgeyi aşağıdaki özelliklerle stillendirmek için dahili CSS kullanın:

body öğesinin arka plan rengini lightgreen olarak ayarlayın.
Tüm h1 başlıklarının metin rengini red olarak ayarlayın.
Tüm paragrafların (p) yazı tipi boyutunu 18px olarak ayarlayın.

Bunun için size başlangıç CSS kodu verilmiştir.

Kopya kağıdı

Dahili CSS, bir HTML belgesinin <head> bölümündeki bir <style> etiketi içine eklenir:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

Dahili CSS, harici stil sayfalarına ihtiyaç duymadan tek bir sayfadaki birden fazla öğeye stil uygulamanıza olanak tanır.

Kendin dene

<!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>