CSS temelleri: seçiciler, renkler, yazı tipleri ve basamaklama

Bu derste öğreneceklerin

CSS'i sayfaya bağlamak ve bir kuralın parçalarını adlandırmak
Etiket, sınıf, id, alt öğe ve sözde sınıf seçicilerini kullanmak
Renkleri, birimleri (px, %, em, rem) ve yazı tipi özelliklerini uygulamak
Basamaklamayı, özgüllüğü ve kalıtımı açıklamak

Şimdiye kadar yazdığın sayfalar iyi yapılandırılmış ama biraz sıkıcı görünüyor: beyaz arka plan, siyah metin, varsayılan yazı tipi. CSS (Cascading Style Sheets, yani basamaklı stil sayfaları) sayfaya görünümünü verir. İşin güzel yanı şu: aynı HTML'e başka bir CSS dosyası bağlayarak sayfayı tek satır HTML'e dokunmadan tamamen değiştirebilirsin.

CSS kuralı ve CSS'i bağlamak

CSS kurallardan oluşur. Bir kural, bir seçiciden (hangi öğeler) ve süslü ayraçlar içindeki bildirimlerden (ne değişecek) oluşur. Her bildirim bir özellik ve bir değerdir; aralarında iki nokta, sonunda noktalı virgül bulunur.

CSS

/* selector   { property: value; } */
h1 {
  color: #e34f26;
  font-size: 32px;
}

h1 seçici, color ve font-size özellik, #e34f26 ve 32px ise değerdir. /* … */ CSS'te bir yorumdur.

CSS'i bir sayfaya üç yolla ekleyebilirsin. Gerçek sitelerde en iyisi ayrı bir dosyadır: tüm sayfalar aynı stilleri paylaşır, tarayıcı da dosyayı bir kez indirip önbelleğe alır.

HTML

<!-- 1. External file, inside <head> (best choice) -->
<link rel="stylesheet" href="styles.css">

<!-- 2. A <style> block, inside <head> -->
<style>
  p { color: navy; }
</style>

<!-- 3. The style attribute on one element -->
<p style="color: navy;">Hello</p>

Seçiciler

Seçici	Neyi seçer
`p`	tüm `<p>` öğelerini (etiket seçicisi)
`.note`	`class="note"` olan tüm öğeleri
`#logo`	`id="logo"` olan tek öğeyi
`nav a`	bir `<nav>` içindeki tüm `<a>` öğelerini (alt öğe seçicisi)
`h2, h3`	hem `<h2>` hem de `<h3>` öğelerini (gruplama)
`a:hover`	fare üzerindeyken bağlantıyı (sözde sınıf)

HTML· Kodu değiştir ve yeniden çalıştır

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  p { color: #334155; }
  .note { background: #fef3c7; padding: 6px 10px; border-radius: 6px; }
  #main-title { color: #7c3aed; }
  li a { color: #0891b2; font-weight: bold; }
  h2, h3 { font-family: Georgia, serif; }
  a:hover { color: #db2777; }
</style>

<h2 id="main-title">CSS selectors</h2>
<p>A normal paragraph.</p>
<p class="note">A paragraph with the class note.</p>
<ul>
  <li><a href="#">A link inside a list</a></li>
</ul>
<h3>Another heading</h3>
<a href="#">A link outside the list</a>

Önizleme

Fareyi bağlantıların üzerine getir; :hover rengini değiştirir. İlk paragrafa da class="note" ekle ve ne olduğuna bak.

Renkler ve birimler

color metnin rengini, background ise arka planı değiştirir. Bir renk birkaç şekilde yazılabilir: adıyla (tomato), onaltılık kodla (#0ea5e9; kırmızı, yeşil ve mavinin payı), rgb() ile (her kanal 0–255) ve hsl() ile (renk tonu 0–360°, doygunluk ve açıklık yüzde olarak). rgb() ve hsl() içinde / 0.5 gibi bir saydamlık da verebilirsin.

HTML· Kodu değiştir ve yeniden çalıştır

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  div { margin: 6px 0; padding: 10px; border-radius: 8px; color: white; }
  .name { background: tomato; }
  .hex { background: #0ea5e9; }
  .short { background: #f60; }
  .rgb { background: rgb(34, 197, 94); }
  .alpha { background: rgb(124 58 237 / 0.4); color: #1e293b; }
  .hsl { background: hsl(330, 80%, 55%); }
</style>

<div class="name">tomato: a color name</div>
<div class="hex">#0ea5e9: hex code</div>
<div class="short">#f60: short hex for #ff6600</div>
<div class="rgb">rgb(34, 197, 94)</div>
<div class="alpha">rgb(124 58 237 / 0.4): 40% visible</div>
<div class="hsl">hsl(330, 80%, 55%)</div>

Önizleme

hsl() içinde yalnızca ilk sayıyı (renk tonunu) değiştir: 0 kırmızı, 120 yeşil, 240 mavidir.

Birim	Neye göre	Tipik kullanım
`px`	sabit boyut (ekran pikseli)	kenarlıklar, küçük boşluklar
`%`	üst öğenin boyutu	genişlikler
`em`	öğenin kendi yazı boyutu (`font-size` içinde üst öğenin yazısı)	metinle birlikte büyüyen iç boşluklar
`rem`	kök öğenin (`<html>`) yazı boyutu, genellikle 16px	yazı boyutları, boşluklar
`vw`, `vh`	pencere genişliğinin / yüksekliğinin %1'i	tam ekran bölümler

HTML· Kodu değiştir ve yeniden çalıştır

<style>
  html { font-size: 16px; }
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .box { font-size: 20px; border: 2px dashed #94a3b8; padding: 8px; }
  .em { font-size: 1.5em; }
  .rem { font-size: 1.5rem; }
  .half { width: 50%; background: #bae6fd; }
</style>

<div class="box">
  The parent's text is 20px
  <p class="em">1.5em = 1.5 × 20px = 30px</p>
  <p class="rem">1.5rem = 1.5 × 16px = 24px</p>
  <p class="half">width: 50% of the parent</p>
</div>

Önizleme

.box'ın yazı boyutunu 30px yap: em ile yazılan metin büyür, rem ile yazılan ise değişmez.

Yazı tipleri ve metin

font-family yazı tipini seçer. Listeye birkaç yazı tipi yazılır: ilki kullanıcının bilgisayarında yoksa tarayıcı bir sonrakini alır. Liste genel bir aileyle bitmelidir: sans-serif, serif ya da monospace. system-ui ise cihazın kendi sistem yazı tipidir. font-size boyutu, font-weight kalınlığı (400 normal, 700 kalın), line-height satır aralığını, text-align ise hizalamayı belirler.

HTML· Kodu değiştir ve yeniden çalıştır

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; background: #f8fafc; }
  .card { max-width: 340px; padding: 16px; background: white; border-radius: 12px; }
  h2 { font-family: Georgia, 'Times New Roman', serif; margin-top: 0; }
  .tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
         text-transform: uppercase; color: #0d9488; }
  p { line-height: 1.6; color: #475569; }
  .price { font-size: 1.5rem; font-weight: 700; text-align: right; color: #1e293b; }
</style>

<div class="card">
  <div class="tag">New book</div>
  <h2>The Caspian Sea</h2>
  <p>A short guide to the largest lake on Earth, its coasts and its wildlife.</p>
  <div class="price">12 AZN</div>
</div>

Önizleme

line-height değerini 1'e düşür ve metnin nasıl sıkıştığına bak. text-transform: uppercase, HTML'i değiştirmeden metni büyük harflerle gösterir.

Basamaklama, özgüllük ve kalıtım

Birkaç kural aynı öğeye aynı özelliği farklı değerlerle verdiğinde hangisi kazanır? Buna basamaklama (cascade) karar verir. Önce özgüllüğe (specificity) bakılır; seçici ne kadar kesinse o kadar güçlüdür: style özniteliği > id > sınıf ve sözde sınıf > etiket. Özgüllük eşitse sonra yazılan kural kazanır.

HTML· Kodu değiştir ve yeniden çalıştır

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; font-size: 18px; }
  p { color: green; }
  .warning { color: darkorange; }
  #special { color: crimson; }
  p { color: royalblue; }
  .box { color: purple; border: 2px solid #cbd5e1; padding: 8px; }
</style>

<p>1. Which color am I?</p>
<p class="warning">2. And me?</p>
<p class="warning" id="special">3. And me?</p>
<div class="box">4. I am purple, and so is my <em>child</em>.</div>

Önizleme

Önce tahmin et, sonra önizlemeye bak. 1 mavi (özgüllük eşit, son kural kazanır), 2 turuncu (sınıf etiketi yener), 3 koyu kırmızı (id sınıfı yener); 4'te ise <em> rengi üst öğeden miras alır ama kenarlığı almaz.

Tanım

Kalıtım

Bazı özelliklerin değerinin üst öğeden alt öğelere kendiliğinden geçmesi. Metinle ilgili özellikler (color, font-family, font-size, line-height) miras alınır; kutuyla ilgili olanlar (border, margin, padding, background) ise alınmaz. Bu yüzden yazı tipini bir kez body'ye vermek yeterlidir.

Önemli noktalar

CSS kuralı = seçici + { özellik: değer; }; gerçek sitelerde CSS ayrı bir dosyadan <link> ile bağlanır.
Temel seçiciler: p (etiket), .class, #id, nav a (alt öğe), a:hover (sözde sınıf).
Renkler: ad, hex, rgb(), hsl(); birimler: px sabittir, %, em, rem ve vw ise görelidir.
Çakışmada özgüllük karar verir (style > id > sınıf > etiket); eşitse son kural kazanır.
Metin özellikleri (color, font-*) miras alınır; kutu özellikleri (margin, border, padding) alınmaz.

Kendini test et

10 soru. Her doğru cevap XP kazandırır.

1 / 10

class="card" olan tüm öğeleri hangi seçici seçer?