Teknoloji Rehberi : HTML Sayfasına CSS Ekleme Yöntemleri

2 Ekim 2024 Çarşamba

HTML Sayfasına CSS Ekleme Yöntemleri

HTML sayfasına CSS eklemenin üç ana yöntemi vardır: inline, internal ve external. Her yöntemin kendine özgü avantajları ve kullanım alanları bulunmaktadır.

1. Inline CSS

Inline CSS, HTML elemanlarının stilini doğrudan elemanların style attribute'ünde tanımlayarak uygulanır. Genellikle küçük değişiklikler için kullanılır.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
 initial-scale=1.0">
    <title>Inline CSS Örneği</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">
Merhaba Dünya!</h1>
    <p style="font-size: 16px; color: gray;">
Bu bir paragraf örneğidir.</p>
</body>
</html>

2. Internal CSS

Internal CSS, head etiketinin içinde yer alan style etiketinin içinde tanımlanır. Genellikle tek bir HTML dosyasına stil eklemek için kullanılır.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
    <title>Internal CSS Örneği</title>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: gray;
        }
    </style>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu bir paragraf örneğidir.</p>
</body>
</html>

3. External CSS

External CSS, ayrı bir .css dosyasında tanımlanır ve HTML dosyasına link etiketiyle bağlanır. Büyük projelerde ve birden fazla HTML dosyasında aynı stilleri kullanmak için en uygunudur.

style.css (External CSS dosyası)

css
h1 {
    color: blue;
    text-align: center;
}
p {
    font-size: 16px;
    color: gray;
}

index.html (HTML dosyası)

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
    <title>External CSS Örneği</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu bir paragraf örneğidir.</p>
</body>
</html>

Özet

Inline CSS: Küçük değişiklikler için, doğrudan elemanların içinde.
Internal CSS: Tek bir HTML dosyasında stil tanımlamak için.
External CSS: Birden fazla HTML dosyasında aynı stilleri kullanmak için.

Her yöntemin belirli kullanım durumları vardır ve projeye göre uygun olanı seçmek önemlidir.

Teknoloji Rehberi

Programlama Dilleri ve Ötesi