Inline CSS, bir elementin style özniteliğine yazılan CSS'tir, örneğin . Bildirimler seçici olmadan yalnızca o elemente uygulanır.

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

Q: HTML'e CSS eklemenin 3 yolu nedir?

Inline, bir elementteki style özniteliğiyle; internal, sayfadaki bir elementiyle; external ise içindeki ile bağlanan ayrı bir .css dosyasıyla. Bütün bir site için genelde external dosya tercih edilir.

Q: Inline CSS, external CSS'i ezer mi?

Çoğu durumda evet. style özniteliğindeki bir bildirim, özgüllüğü ne olursa olsun stil dosyasındaki her seçiciyi yener. Stil dosyasının kazanmasının tek yolu !important'tır; inline bir !important ise onu da yener.

Q: Inline CSS kötü bir uygulama mı?

Bütün bir sitenin stili için evet: kendini tekrar eder, :hover ya da medya sorguları kullanamaz ve ezilmesi zordur. İlerleme çubuğu genişliği ya da kullanıcının seçtiği bir renk gibi JavaScript'in veya bir şablonun yazdığı tek seferlik değerler için sorun yoktur.

Q: Inline CSS'te hover kullanılabilir mi?

Hayır. style özniteliği yalnızca bildirim kabul eder, bu yüzden :hover gibi sözde sınıflar, ::before gibi sözde elementler ve @media kuralları oraya yazılamaz. Bunları bir elementine ya da stil dosyasına koy.

Inline CSS nedir

Inline CSS, style özniteliğiyle doğrudan bir HTML elementinin üzerine yazılan CSS'tir. Değer bir bildirim listesidir, property: value; biçiminde, ve yalnızca o elemente uygulanır.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

Seçici de süslü parantez de yoktur: özniteliğin durduğu element hedeftir. Bildirimleri noktalı virgülle ayır. Son noktalı virgül isteğe bağlıdır, ama onu bırakmak bir sonraki bildirimi eklemeyi güvenli hale getirir.

Söz dizimi

<element style="property: value; property: value;">

Parça	Örnek	Notlar
Öznitelik	`style="..."`	Genel bir öznitelik: her HTML elementinde kullanılabilir
Bildirim	`color: #2563eb;`	Stil dosyasındaki bir kuralın içindekiyle aynı söz dizimi
Birden fazla bildirim	`padding: 8px; border: 1px solid #e5e7eb;`	`;` ile ayrılır
İçeride tırnak	`style="font-family: 'Courier New', monospace;"`	Çift tırnaklı özniteliğin içinde tek tırnak kullan

Bildirim olmayan hiçbir şeye izin verilmez. :hover, ::before, @media ve seçicilerin bir style özniteliğinde yeri yoktur.

HTML'e CSS eklemenin 3 yolu

CSS bir sayfaya üç yoldan ulaşır. Bu sayfa ilkini anlatıyor; external ve internal CSS için ayrı bir sayfa var.

Yöntem	CSS'in durduğu yer	Kapsam	Tipik kullanım
Inline	Tek bir elementteki `style` özniteliği	O element	Tek seferlik değerler, JavaScript'in yazdığı değerler
Internal	Sayfadaki `<style>` elementi	O sayfa	Tek sayfalık demolar, e-posta şablonları, kritik CSS
External	`<link>` ile bağlanan bir `.css` dosyası	Onu bağlayan her sayfa	Bütün bir sitenin stili

Aynı paragrafın üç yolla da stillenmiş hali (önizlemenin yükleyeceği ikinci bir dosya olmadığı için external dosya yorum olarak gösteriliyor):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Üçüncü paragraf .note kuralından gelen padding ve köşe yuvarlaklığını korur ve yalnızca arka planı değiştirir, çünkü inline stil sadece o tek özelliği ayarlıyor.

Inline stiller neden kazanır

Bir stil dosyası kuralı ve bir inline stil aynı özelliği ayarladığında inline stil kazanır. Seçicinin ne kadar özgül olduğu fark etmez: bir ID seçici bile kaybeder.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

Tek istisna !important'tır. !important ile işaretlenmiş bir stil dosyası bildirimi normal bir inline bildirimi yener, inline bir !important ise ikisini de yener. Inline stillerin bir sitenin bakımını zorlaştırmasının nedeni budur: onları stil dosyasından değiştirmek için !important gerekir ve bu bir tırmanışı başlatır. Sıralamanın tamamı !important sayfasında anlatılıyor.

Inline CSS ne zaman doğru araçtır

Inline stiller, değer tasarım değil veri olduğunda uygundur: element başına değişir ve bir şablon ya da JavaScript tarafından yazılır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

Görünüm (renkler, yükseklik, köşe yuvarlaklığı) stil dosyasında durur. Yalnızca çubuktan çubuğa değişen genişlik inline'dır. JavaScript aynı özniteliği element.style üzerinden yazar:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Tıklamadan sonra paragrafın HTML'i style="color: rgb(245, 158, 11); font-weight: bold;" olur. Tire içeren özellik adları JavaScript'te camelCase'e dönüşür (font-weight, fontWeight olur).

Çoğu zaman en temiz orta yol bir CSS değişkenidir: inline olarak yalnızca değişkeni ayarla, style="--progress: 35%", ve stil dosyasının onu kullanmasına izin ver. Bkz. CSS değişkenleri.

Inline CSS'in yetersiz kaldığı yerler

Durum ya da sözde element yok. Bir style özniteliğine :hover, :focus ya da ::before yazamazsın.
Medya sorgusu yok. Inline bir genişlik telefonda değişemez.
Tekrar. Aynı inline stile sahip on buton, düzenlenecek on yer demektir.
Ezmesi zor. Onu yalnızca stil dosyasındaki !important yener.
Content Security Policy. style-src içinde 'unsafe-inline' olmayan katı bir CSP, HTML'e yazılmış style özniteliklerini engeller.

Sık yapılan hatalar

style içine seçici ya da süslü parantez yazmak. style="p { color: red }" yok sayılır. Oraya yalnızca bildirimler girer.
: yerine = kullanmak. Doğrusu color: red, color=red değil.
Çift tırnakları iç içe koymak. style="font-family: "Arial"" özniteliği erken bitirir. İçeride tek tırnak kullan.
Birimi unutmak. style="width: 200" yok sayılır; 200px yaz. Birimini atabilen tek uzunluk 0'dır.
Bütün siteyi inline stillemek. Tekrar eden stilleri stil dosyasındaki bir class'a taşı, inline stilleri element başına değişen değerlere bırak.

Sıkça Sorulan Sorular

Inline CSS nedir?

Inline CSS, bir elementin style özniteliğine yazılan CSS'tir, örneğin <p style="color: red;">. Bildirimler seçici olmadan yalnızca o elemente uygulanır.

HTML'e CSS eklemenin 3 yolu nedir?

Inline, bir elementteki style özniteliğiyle; internal, sayfadaki bir <style> elementiyle; external ise <head> içindeki <link rel="stylesheet" href="styles.css"> ile bağlanan ayrı bir .css dosyasıyla. Bütün bir site için genelde external dosya tercih edilir.

Inline CSS, external CSS'i ezer mi?

Çoğu durumda evet. style özniteliğindeki bir bildirim, özgüllüğü ne olursa olsun stil dosyasındaki her seçiciyi yener. Stil dosyasının kazanmasının tek yolu !important'tır; inline bir !important ise onu da yener.

Inline CSS kötü bir uygulama mı?

Bütün bir sitenin stili için evet: kendini tekrar eder, :hover ya da medya sorguları kullanamaz ve ezilmesi zordur. İlerleme çubuğu genişliği ya da kullanıcının seçtiği bir renk gibi JavaScript'in veya bir şablonun yazdığı tek seferlik değerler için sorun yoktur.

Inline CSS'te hover kullanılabilir mi?

Hayır. style özniteliği yalnızca bildirim kabul eder, bu yüzden :hover gibi sözde sınıflar, ::before gibi sözde elementler ve @media kuralları oraya yazılamaz. Bunları bir <style> elementine ya da stil dosyasına koy.

İlgili kavramlar