Stil Dosyası Kurmak

Bu dersin sonunda bir siteye ayrı bir CSS dosyası bağlayabilecek, dosyanızı düzenli tutabilecek ve tarayıcının kendi stillerini tanıyabileceksiniz.

Neden ayrı bir dosya?

HTML bölümünde style niteliğiyle yüzlerce özellik denediniz ve son derste bu yöntemin sınırlarını gördünüz. Aynı görünümü on elemanda istiyorsanız on kez yazmanız gerekiyordu.

Ayrı bir CSS dosyası bu sorunu çözer. Kuralları bir kez yazarsınız, sitenin bütün sayfaları aynı dosyayı kullanır. Sitenin ana rengini değiştirmek için tek bir satırı düzenlemeniz yeterli olur.

Öğrendiğiniz özelliklerin hiçbiri değişmiyor. color, padding ve display burada da aynen çalışır. Değişen tek şey, bu özellikleri nereye yazdığınızdır.

Dosyayı bağlamak

Klasörünüzde index.html dosyasının yanına stil.css adında bir dosya oluşturun. Ardından HTML dosyanızın head bölümüne şu satırı ekleyin:

<link rel="stylesheet" href="stil.css">

• rel="stylesheet" tarayıcıya bu dosyanın bir stil dosyası olduğunu söyler.
• href dosyanın yoludur. Dosya Yolları dersinde öğrendiğiniz kurallar burada da geçerlidir. CSS dosyanız css adlı bir klasördeyse href="css/stil.css" yazarsınız.

CSS dosyasının içine yalnızca CSS yazılır. <style> etiketi veya HTML kodu yazılmaz:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

h1 {
  color: teal;
}

Sayfayı yenilediğinizde stil gelmiyorsa geliştirici araçlarının Network sekmesini açın ve sayfayı yenileyin. stil.css satırında 404 görüyorsanız dosya yolu yanlıştır. Dosya değiştiği halde eski görünüm duruyorsa Ctrl + F5 ile önbelleği atlayarak yenileyin.

Kural yazmak

Her kural bir seçiciden ve süslü parantezler içindeki bildirimlerden oluşur. Bildirimleri alt alta yazmak okumayı kolaylaştırır.

<h1>Okul Gazetesi</h1>
<p class="ozet">Bu haftanın haberleri.</p>
<p>Normal bir paragraf.</p>

h1 {
  color: teal;
  letter-spacing: 0.02em;
}

.ozet {
  font-size: 1.25rem;
  color: dimgray;
}

Yorumlar

CSS’te yorumlar /* ile başlar ve */ ile biter. Tarayıcı bunları okumaz. Dosyanızı bölümlere ayırmak veya bir kararın nedenini not etmek için kullanılır. HTML’deki <!-- --> yazımı burada çalışmaz.

/* ---- Genel ---- */
body {
  margin: 0;
}

/* Menü küçük ekranda taştığı için satır kırılabilir */
.menu {
  flex-wrap: wrap;
}

Yorumlar bir özelliği geçici olarak kapatmak için de işe yarar. VS Code’da satırı seçip Ctrl + / tuşlarına basmanız yeterlidir.

Tarayıcının kendi stilleri

Hiç CSS yazmasanız da h1 büyük görünür, bağlantılar mavidir ve body çevresinde boşluk vardır. Bunlar tarayıcının varsayılan stilleridir. Geliştirici araçlarında user agent stylesheet başlığıyla görünürler.

Bu stiller her tarayıcıda küçük farklar gösterir. Bu yüzden birçok proje dosyasının başında birkaç kuralla ortak bir başlangıç noktası kurar:

<h1>Kenar boşluğu yok</h1>
<p>Bu sayfa pencerenin kenarına kadar uzanıyor, çünkü body boşluğu kaldırıldı.</p>
<div class="kutu">Genişliği hesaplaması kolay bir kutu</div>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.kutu {
  width: 100%;
  padding: 16px;
  background-color: khaki;
}

* seçicisi bütün elemanları seçer. box-sizing: border-box kuralını bu şekilde her elemana vermek çok yaygındır.

Dosyayı düzenlemek

Dosyanız büyüdükçe kuralları bulmak zorlaşır. Basit bir sıra çok işe yarar:

1. Genel kurallar: *, body, başlıklar, bağlantılar
2. Sayfa düzeni: üst bölüm, menü, ana içerik, alt bölüm
3. Bileşenler: kartlar, düğmeler, formlar
4. Yardımcı kurallar

Sıra yalnızca düzen için değildir. İleride göreceğiniz gibi, aynı önemdeki iki kuraldan sonra yazılan kazanır.

<style>
  body {
    margin: 0;
  }

  h1 {
    color: teal;
  }
</style>

<h1>Merhaba</h1>

<style>
  .ozet {
    font-size: 1.25rem;
    color: dimgray;
  }
</style>

<p class="ozet">Bu haftanın haberleri.</p>

Bu derste öğrendikleriniz

• Stil dosyası link etiketiyle bağlanır ve içinde yalnızca CSS bulunur.
• Yorumlar /* ile başlar, */ ile biter.
• Tarayıcıların varsayılan stilleri vardır ve bunları değiştirebilirsiniz.
• Düzenli bir dosya, kuralları bulmayı ve sırayı yönetmeyi kolaylaştırır.