Yükleniyor...

CSS Nasıl Eklenir

CSS kurallarını hatasız yazmış olabilirsiniz, yine de sayfada hiçbir şey değişmeyebilir. Sebep çoğu zaman basittir: tarayıcı o kuralları hiç yüklememiştir. Bu derste CSS'i HTML'e bağlamanın üç yaygın yolunu ve bunlardan hangisini varsayılan seçmeniz gerektiğini öğreneceksiniz.

Bir HTML sayfasına CSS nasıl eklenir?

Üç yol var: head içinden bağladığınız bir harici stylesheet, head içine yazdığınız dahili bir <style> bloğu ya da tek bir öğeye verdiğiniz satır içi style özniteliği. Gerçek bir site ya da çok sayfalı bir proje yapıyorsanız işe ayrı bir .css dosyasıyla başlayın.

Üç yönteme hızlı bakış

Kod yazmaya başlamadan önce bu tabloya bakıp yönteminizi seçin. Sonraki bölümlerde her yöntem için kısa bir örnek göreceksiniz.

📊 CSS ekleme yöntemleri

Yöntem Nerede durur Sayfalar arasında yeniden kullanım En uygun kullanım
Harici stylesheet Ayrı bir .css dosyası + head içinde <link> Çok iyi Projeler ve bu kurs için varsayılan seçim
Dahili CSS HTML head içinde <style> … </style> Yalnızca o sayfada Hızlı demolar ve tek dosyalık alıştırmalar
Satır içi CSS Bir HTML öğesinde style="…" Yok Küçük, tek seferlik düzeltmeler (az kullanın)

Harici stylesheet (önerilen varsayılan)

HTML ile CSS'i ayrı dosyalarda tutun. head içine bir link öğesi koyup stylesheet'i gösterin; tarayıcı CSS dosyasını indirir ve içindeki kuralları uygular.

Harici stylesheet bağlama

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

Kuralları HTML dosyasının yanındaki styles.css dosyasına yazın (dosya bir alt klasördeyse href değerini yola göre değiştirin):

Harici styles.css

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

Gerçek projelerde harici dosya neden daha iyi?

  • Tek bir stylesheet birçok HTML sayfasının görünümünü belirleyebilir
  • Görünümü değiştirmek için HTML'in içinde stil aramanız gerekmez
  • Tarayıcı .css dosyasını önbelleğe alabilir; sayfalar arasında geçerken dosyayı yeniden indirmez
  • rel="stylesheet" ve doğru href şarttır. Yolda küçük bir yazım hatası olursa tarayıcı hata göstermeden sayfayı stilsiz bırakır

Dahili CSS (head içinde <style>)

Tek sayfalık bir alıştırmada kuralları head içindeki bir <style> öğesine yazabilirsiniz. Giriş ve Syntax derslerinde HTML ile CSS tek dosyada kalsın diye bu yöntemi kullanmıştık.

Dahili style bloğu

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

Dahili CSS ne zaman yeterlidir?

Tek dosya olarak teslim etmeniz gereken demolarda ve ödevlerde dahili CSS işinizi görür. Ama proje büyüdükçe sorun çıkarır: aynı <style> bloğunu her sayfaya kopyalarsanız zamanla kopyalar birbirinden farklılaşır ve küçük bir değişiklik için birçok yeri düzeltmeniz gerekir. İkinci sayfayı eklediğiniz anda ya da kodu daha düzenli tutmak istediğinizde harici dosyaya geçin.

Satır içi CSS (style özniteliği)

Satır içi yöntemde bildirimleri (declaration) doğrudan öğenin style özniteliğine yazarsınız. Ortada ne seçici (selector) ne de ayrı bir dosya vardır; yalnızca o öğe biçimlenir.

Satır içi style özniteliği

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

Az kullanın

Satır içi stil, hızlı ve geçici bir deneme için kullanışlıdır. Ama görünüm kodunu HTML'in içine karıştırır, başka yerde yeniden kullanamazsınız ve cascade ile specificity devreye girince sonradan ezmek (override) zorlaşır. Bunun yerine stylesheet içinde class kullanmayı tercih edin. Cascade'deki çakışma kurallarını ilerleyen derslerde göreceğiz; şimdilik satır içi stile alışkanlık değil, istisna gözüyle bakın.

Hangi yöntemi seçmeliyim?

  • Bir site yapıyorsanız ya da bu kursun projelerini çalışıyorsanız: harici stylesheet
  • Derste kısa bir demo dosyası hazırlıyorsanız: dahili <style> kabul edilebilir
  • Hata ayıklarken tek bir öğeyi birkaç saniyeliğine değiştirmek istiyorsanız: satır içi stil yardımcı olabilir; sonra kuralı stylesheet'e taşıyın
    Yöntemleri birlikte kullanmak serbesttir. Aynı özellik birden fazla yerde ayarlanırsa tarayıcı cascade kurallarına göre karar verir (bunu sonra anlatacağız). İyi bir alışkanlık: kalıcı stilleri harici dosyada tutun ve aynı özelliği üç yönteme birden dağıtmayın.

Kendiniz deneyin

  1. Aynı klasörde howto.html ve styles.css dosyalarını oluşturun.
  2. howto.html içindeki head bölümüne <link rel="stylesheet" href="styles.css"> ekleyin, body içine de şu başlığı yazın: <h1 class="hero">How-to practice</h1>.
  3. styles.css dosyasına şu kuralı ekleyin: .hero { color: #0f766e; }. Sonra HTML dosyasını tarayıcıda açın.
  4. Rengi #1d4ed8 olarak değiştirin, CSS dosyasını kaydedin ve sayfayı yenileyin. Başlığın rengi değişmeli.
  5. h1 öğesine geçici olarak style="color: #b45309;" ekleyip sayfayı yenileyin. Ardından özniteliği silin; renk yeniden stylesheet'ten gelsin.

Sık yapılan hatalar

  • <link rel="stylesheet" …> öğesini alışkanlıkla body içine koymak. Yeri head bölümüdür; belgenin diğer üst bilgileriyle birlikte durur
  • href içinde yazım hatası yapmak (örneğin styles.css yerine style.css). Dosya hiç yüklenmez, sayfa stilsiz görünür
  • link öğesine rel="stylesheet" yazmayı unutmak
  • Ortak bir harici dosya kullanmak yerine tam bir <style> bloğunu her sayfaya yapıştırmak
  • Bütün renkleri ve yazı tiplerini satır içi style ile vermek. HTML kalabalıklaşır, bakımı zorlaşır

Özet

  • Üç yol var: harici stylesheet, dahili <style> ve satır içi style özniteliği
  • Gerçek sayfalarda varsayılan yöntem, head içinde <link rel="stylesheet" href="…"> ile bağlanan harici dosyadır
  • Dahili CSS tek dosyalık alıştırmalara, satır içi CSS ise seyrek yapılan tek seferlik düzeltmelere uygundur
  • Yoldaki yazım hataları ve eksik rel, stillerin "hiçbir şey yapmıyormuş" gibi görünmesinin sık nedenleridir
  • Pratik için gerçek bir .css dosyası bağlayın, bir değeri değiştirin ve sayfayı yenileyin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders