HTML Sayfalarına CSS Eklemek

eminbasbayan

4 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

CSS (Cascading Style Sheets), bir web sayfasının görünümünü ve düzenini kontrol etmemize olanak tanır. Ancak, CSS yazmaya başlamadan önce, bu stilleri nerede ve nasıl yazacağımızı öğrenmek önemlidir. Bu yazıda, CSS’i HTML sayfalarımıza eklemek için kullanılan üç farklı yöntemi inceleyeceğiz ve her birinin avantajlarını ve dezavantajlarını açıklayacağız.

TEXT?

1. Inline CSS (Satır İçi CSS)

Inline CSS, stilleri doğrudan HTML elemanlarının içine yazma yöntemidir. Bu yöntem, her bir HTML etiketi için ayrı ayrı style özelliğini kullanmayı gerektirir.

Örnek:

<p style="font-size: 18px; color: teal;">Bu, satır içi CSS kullanılarak stil
verilmiş bir paragraf.</p>
<button style="padding: 10px; border: none;
background-color: coral; color: white;">Tıklayın</button>

Yukarıdaki örnekte, p paragrafı teal renginde ve 18 piksel boyutunda yazı tipine sahipken, düğme turuncu arka planlı ve beyaz yazı rengine sahip olur. Ancak, inline CSS’in ciddi dezavantajları vardır:

Zor Yönetim: Aynı stili birden fazla elemanda kullanmak istediğinizde, bu stilleri kopyalayıp yapıştırmanız gerekir.
Zaman Alıcı Değişiklikler: Stilleri değiştirmek istediğinizde, tüm elemanları tek tek güncellemeniz gerekir.
Paylaşım Zorluğu: Inline CSS, birden fazla HTML sayfasında kullanılacak stilleri paylaşmayı imkansız hale getirir.

Bu nedenlerle, inline CSS genellikle önerilmez. Ancak, başka birinin kodunda karşılaşabileceğiniz için bu yöntemi bilmek önemlidir.

2. Internal CSS (Dahili CSS)

Internal CSS, stillerinizi bir HTML dosyasının <head> bölümüne yerleştirmenizi sağlar. Bu yöntemde, <style> etiketi kullanılarak tüm CSS kuralları aynı belge içinde yazılır.

Örnek:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Dahili CSS Örneği</title>
    <style>
        h1 {
            text-align: center; /* Başlığı ortalar */
            color: navy;       /* Başlık rengini lacivert yapar */
        }
        p {
            line-height: 1.6;  /* Satır yüksekliğini ayarlar */
            font-family: Arial, sans-serif; /* Yazı tipini ayarlar */
        }
    </style>
</head>
<body>
    <h1>Hoş Geldiniz</h1>
    <p>Bu paragraf, dahili CSS ile düzenlenmiştir ve Arial yazı tipi kullanır.</p>
</body>
</html>

Yukarıdaki örnekte, başlık ortalanmış ve lacivert rengindeyken, paragraf Arial yazı tipinde ve 1.6 satır yüksekliğinde gösterilir. Dahili CSS, inline CSS’e göre daha düzenlidir ve aynı türden elemanlar için tekrarı ortadan kaldırır. Ancak, internal CSS’in de bazı sınırlamaları vardır:

Çoklu Sayfalar için Zor: Eğer birden fazla HTML sayfasında aynı stili kullanmak istiyorsanız, bu stili her sayfada tekrar etmeniz gerekir.
Karışıklık Riski: Tüm CSS kuralları HTML belgesiyle aynı dosyada olduğunda, belge büyüdükçe düzeni korumak zorlaşabilir.

3. External CSS (Harici CSS)

Harici CSS, stillerinizi ayrı bir dosyada yazmanıza olanak tanır. Bu yöntem, en düzenli ve profesyonel yaklaşımdır. Stillerinizi .css uzantılı bir dosyada tanımlar ve bu dosyayı HTML belgenize bağlarsınız.

Örnek:

HTML Dosyası:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Harici CSS Örneği</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Bu başlık harici CSS ile düzenlenmiştir.</h2>
        <p>Harici CSS, projelerinizi daha düzenli hale getirir.</p>
    </div>
</body>
</html>

CSS Dosyası (styles.css):

.container {
    max-width: 800px;
    margin: 0 auto; /* Ortalamak için */
    padding: 20px;
    background-color: #f9f9f9; /* Hafif gri arka plan */
    border-radius: 8px;
}

h2 {
    color: darkgreen; /* Koyu yeşil başlık rengi */
    font-size: 24px;
}

p {
    color: #555; /* Gri metin rengi */
    font-size: 16px;
}

Harici CSS’in avantajları şunlardır:

Düzenli ve Okunaklı: HTML ve CSS kodlarınızı ayrı dosyalarda tutarak projelerinizi daha düzenli hale getirirsiniz.
Kolay Yönetim: Birden fazla HTML sayfası için aynı CSS dosyasını kullanabilirsiniz. Böylece, tüm sayfalarda bir değişiklik yapmak için yalnızca CSS dosyasını düzenlemeniz yeterlidir.
Paylaşım: Harici CSS dosyaları, diğer projelerde veya belgelerde kolayca yeniden kullanılabilir.

CSS Dosyasını HTML’ye Bağlama

Bir harici CSS dosyasını HTML belgesine bağlamak için <link> etiketi kullanılır. Bu etiket <head> bölgesine eklenir ve aşağıdaki özelliklere sahip olur:

rel="stylesheet": Belgenin bir stil dosyasına bağlandığını belirtir.
href: Bağlanacak CSS dosyasının yolunu belirtir.

Örnek:

<link rel="stylesheet" href="css/main.css">

Bu kod, main.css dosyasını HTML belgesine bağlar. Dosya aynı klasördeyse, doğrudan adı yazılır. Farklı bir klasördeyse, yol belirtilir (örneğin, css/styles.css).

Hangi Yöntem Daha İyi?

CSS yazmak için en iyi yöntem, genellikle harici CSS kullanmaktır. Bu yöntem:

Daha düzenlidir,
Kodunuzu yeniden kullanılabilir hale getirir,
Büyük projelerde yönetimi kolaylaştırır.

Ancak, küçük ve hızlı testler için dahili CSS, özel bir durum içinse inline CSS kullanılabilir.

Sonuç

CSS, web sayfalarınızı sadece metin ve içerik yığını olmaktan çıkarıp görsel olarak çekici ve kullanıcı dostu hale getirir. Ancak, stillerinizi yazarken düzenli olmak ve doğru yöntemleri kullanmak önemlidir. Harici CSS, projelerinizi daha profesyonel bir seviyeye taşımanıza yardımcı olur. Şimdi, bir CSS dosyası oluşturun ve sitenizi güzelleştirmeye başlayın.