Internal CSS, diğer adıyla gömülü CSS, HTML belgesinin içindeki bir elementine, genellikle içine yazılan CSS'tir. Yalnızca o sayfaya uygulanır.

Çalıştırılabilir CSS Dokümanları: External CSS

Q: External CSS nedir?

External CSS, kendi .css dosyasına kaydedilen ve sayfanın kısmında ile yüklenen bir stil dosyasıdır. Dosyayı bağlayan her sayfa aynı stilleri alır ve tarayıcı dosyayı sayfalar arasında önbellekte tutar.

Q: CSS dosyasını HTML'e nasıl bağlarım?

içine ekle. href, HTML dosyasına göre göreli bir yoldur: css/styles.css yanındaki css klasörünü gösterir, /styles.css ise sitenin kökünden başlar.

Q: External CSS'im neden çalışmıyor?

Genel nedenler yanlış bir href yolu (Network sekmesinde 404 olup olmadığına bak), eksik rel="stylesheet", .css dosyasının içine yazılmış etiketleri ya da seninkini ezen daha sonraki bir kuraldır. Sert bir yenileme, önbellekteki eski bir kopyayı devre dışı bırakır.

External CSS ve Internal CSS: link ve style Etiketi

External CSS, her sayfanın <link rel="stylesheet"> ile bağladığı bir .css dosyasında durur; internal CSS ise tek bir sayfanın içindeki <style> elementindedir. İkisini de, dosya yollarının nasıl çalıştığını ve karşılaştıklarında hangi kuralın kazandığını öğren.

Bu sayfada çalıştırılabilir editörler var - düzenle, çalıştır ve sonucu anında gör.

Yazan Kevin Spektor, Co-founder & CTO

Sep 24, 2026 tarihinde yayınlandı

Tek satırda external CSS

External CSS ayrı bir .css dosyasıdır. Ona ihtiyaç duyan her sayfanın <head> kısmından bağlarsın:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Dosyanın kendisi, etrafında HTML etiketi olmayan düz CSS kuralları içerir:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

Aşağıdaki önizlemenin yükleyeceği ikinci bir dosya yok, bu yüzden aynı CSS'i bir <style> elementine koyuyor. Bu internal CSS'tir ve bağlanan dosyanın vereceği sonucun aynısını gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

Internal CSS: style elementi

Internal CSS (gömülü CSS de denir), sayfanın içindeki bir <style> elementidir. Stiller body çizilmeden önce bilinsin diye onu <head> içine koy. Bütün sayfaya uygulanır ve kuralları seçici kullanır, inline style öznitelikleri ise bunu yapamaz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Bir etiketin üzerine gel: :hover burada çalışır, çünkü gerçek bir kuraldır. Üçüncü yol olan style özniteliği inline CSS sayfasında anlatılıyor.

Internal ve external CSS farkı

	External (`<link>`)	Internal (`<style>`)
Nerede	Bir `.css` dosyasında	HTML sayfasının içinde
Kapsam	Onu bağlayan her sayfa	Tek bir sayfa
Önbellek	Bir kez indirilir, sayfalar arasında tekrar kullanılır	Her sayfayla yeniden gönderilir
Sitenin görünümünü değiştirmek	Tek dosyayı değiştir	Her sayfayı değiştir
Ek istek	Evet, dosya başına bir tane	Hayır
Uygun olduğu yer	Gerçek web siteleri	Demolar, tek sayfalar, HTML e-posta, kritik CSS

Özgüllük ikisinde de aynıdır: bir <style> elementindeki kural ile bağlanan dosyadaki aynı kural tam olarak aynı ağırlıktadır. Eşit olduklarında belgede daha sonra gelen kazanır.

Sıra: sonraki stil dosyası kazanır

Stil dosyaları, <link> ve <style> fark etmeksizin belge sırasıyla okunur. Aynı özgüllükteki iki kuraldan sonraki kazanır. Aşağıdaki iki <style> bloğu, bağlanan bir dosyayı ve ardından gelen sayfa düzeyinde bir ezmeyi temsil ediyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Buton ilk kuraldan padding'i ve beyaz yazıyı korur, ikinciden yalnızca arka planı alır. Bir sitenin kendi stil dosyasının bir framework'ünkinden sonra gelmesinin nedeni budur: önce kütüphaneyi, sonra kendi dosyanı <link> ile bağla.

href içindeki dosya yolları

Bir <link> etiketinin href değeri, HTML dosyasının konumuna göre çözümlenen bir URL'dir.

href	Yüklediği
`styles.css`	Sayfayla aynı klasördeki bir dosya
`css/styles.css`	Sayfanın yanındaki `css` klasörü
`../styles.css`	Bir üst klasör
`/styles.css`	Sitenin kökünden
`https://example.com/a.css`	Başka bir sunucudaki tam URL

Sayfaları farklı derinliklerde duran bir sitede kök göreli biçim (/css/styles.css), tek bir yolun her sayfada çalışmasını sağlar.

Yazdırma ve diğer ortamlar için stil dosyaları

Bir media özniteliği, stil dosyasını eşleşen koşullarla sınırlar. <link> de <style> de onu kabul eder:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

Önizleme bir ekran olduğu için şerit görünür. Gerçek bir sayfada şerit çıktıdan kaybolur; DevTools'ta print medya türünü taklit ederek (Rendering paneli) aynısını görebilirsin.

Sık yapılan hatalar

Yanlış yol. href içindeki bir yazım hatası hiçbir şey yüklemez ve sayfa stilsiz görünür. DevTools'u aç, Network sekmesine geç ve .css dosyası için bir 404 ara.
rel="stylesheet"'i unutmak. O olmadan <link href="styles.css"> bir stil dosyası yüklemez.
.css dosyasının içinde HTML. Bir .css dosyası yalnızca kural içerir. İçindeki <style> etiketleri geçerli CSS değildir ve yanlarındaki kuralı bozar.
Kendi stil dosyanı framework'ünkinden önce koymak. Eşit özgüllükte sonraki dosya kazanır, bu yüzden kendi CSS'ini en son bağla.
Eski bir sürümü görmek. Tarayıcılar stil dosyalarını önbelleğe alır. Sert yenileme yap ya da bir değişikliği yayına alırken URL'e bir sürüm ekle (styles.css?v=2).

Sıkça Sorulan Sorular

External CSS nedir?

External CSS, kendi .css dosyasına kaydedilen ve sayfanın <head> kısmında <link rel="stylesheet" href="styles.css"> ile yüklenen bir stil dosyasıdır. Dosyayı bağlayan her sayfa aynı stilleri alır ve tarayıcı dosyayı sayfalar arasında önbellekte tutar.

Internal CSS nedir?

Internal CSS, diğer adıyla gömülü CSS, HTML belgesinin içindeki bir <style> elementine, genellikle <head> içine yazılan CSS'tir. Yalnızca o sayfaya uygulanır.

CSS dosyasını HTML'e nasıl bağlarım?

<head> içine <link rel="stylesheet" href="styles.css"> ekle. href, HTML dosyasına göre göreli bir yoldur: css/styles.css yanındaki css klasörünü gösterir, /styles.css ise sitenin kökünden başlar.

Internal mı external CSS mi daha iyi?

Birden fazla sayfası olan her şey için external CSS: düzenlenecek tek dosya vardır ve tarayıcılar onu bir kez indirip tekrar kullanır. Internal CSS tek bir sayfaya, bir demoya ya da ilk yanıtta olmasını istediğin küçük bir kritik stil bloğuna uyar.

External CSS'im neden çalışmıyor?

Genel nedenler yanlış bir href yolu (Network sekmesinde 404 olup olmadığına bak), eksik rel="stylesheet", .css dosyasının içine yazılmış <style> etiketleri ya da seninkini ezen daha sonraki bir kuraldır. Sert bir yenileme, önbellekteki eski bir kopyayı devre dışı bırakır.

İlgili kavramlar