Web geliştirme dünyasına adım attığınızda, HTML ile web sayfanızın iskeletini oluşturduktan sonra atmanız gereken ilk adım bu iskeleti giydirmek ve renklendirmektir. İşte bu noktada karşınıza “CSS” kavramı çıkar. Daha önce hiç kod yazmamış olsanız bile, bu rehberi okuduktan sonra CSS’in ne anlama geldiğini, nasıl çalıştığını ve kendi web sitenize nasıl CSS ekleyebileceğinizi örneklerle, kolayca öğrenmiş olacaksınız.
1. CSS Nedir?
CSS, İngilizce “Cascading Style Sheets” kelimelerinin baş harflerinden oluşur ve Türkçeye “Basamaklı Stil Şablonları” olarak çevrilir. CSS, HTML (veya XML) gibi işaretleme dilleriyle yapılandırılmış bir belgenin (web sayfasının) ekranda, kağıt üzerinde veya diğer ortamlarda nasıl görüneceğini, nasıl biçimlendirileceğini (renkler, yazı tipleri, boşluklar, düzen) tanımlayan temel bir web teknolojisidir.
Konuyu daha iyi kavramak için şu popüler metaforu kullanabiliriz: Eğer bir web sayfasını inşa halindeki bir restorana benzetirsek; HTML bu restoranın temelidir, duvarlarıdır, kolonlarıdır ve yapısal planıdır. CSS ise bu restoranın iç mimarıdır. Duvarların ne renk boyanacağı, masaların nereye yerleştirileceği, aydınlatmaların nasıl olacağı ve genel atmosfer tamamen CSS’in sorumluluğundadır. CSS olmadan günümüzdeki modern web siteleri, sadece siyah metinlerden ve mavi linklerden oluşan, oldukça sıkıcı, dümdüz beyaz bir sayfa olarak görünürdü.
“Cascading” (Basamaklı) Ne Demek?
CSS’teki “C” harfini temsil eden “Cascading” kelimesi, stillerin birbiri ardına şelale gibi akmasını ve bir öncelik sırasına göre uygulanmasını ifade eder. Örneğin, bir web sayfasının arka plan rengini önce “mavi”, sonraki bir satırda “kırmızı” olarak belirlerseniz, CSS en son okuduğu veya en baskın olan kuralı (kırmızıyı) uygular.
Neden CSS Kullanmalıyız? (Avantajları)
- İçerik ve Tasarımın Ayrılması: CSS, içeriği (HTML) sunumdan (görsel tasarımdan) ayırır. Bu ayrım, kodlarınızın okunabilirliğini artırır ve arama motorlarının (Google gibi) sitenizi daha iyi anlamasını (SEO) sağlar.
- Zaman ve Emek Tasarrufu: Tek bir CSS dosyası yazarak, web sitenizdeki binlerce sayfanın tasarımını aynı anda kontrol edebilirsiniz.
- Site Geneli Tutarlılık: Web sitenizin her sayfasında aynı fontların, aynı buton renklerinin kullanılmasını garanti altına alır.
- Sayfa Yükleme Hızı: CSS kodları harici bir dosyada tutulduğunda, tarayıcı bu dosyayı belleğe (cache) alır. Ziyaretçi sitenizde gezinirken sayfalar çok daha hızlı yüklenir, bu da bant genişliğinden tasarruf sağlar.
2. CSS Nasıl Çalışır? (Temel Sözdizimi)
CSS yazmak, belirli kurallar koymaktan ibarettir. CSS kural tabanlı bir dildir ve bir kural temel olarak iki ana bölümden oluşur: Seçici (Selector) ve Bildirim Bloğu (Declaration Block).
Örnek bir CSS kuralı:
h1 {
color: red;
font-size: 24px;
}
Bu kodu inceleyelim:
- Seçici (
h1): HTML içinde hangi etiketi (veya etiketleri) şekillendireceğimizi belirtir. Burada sayfamızdaki ana başlıkları (h1) seçtik. - Süslü Parantezler (
{ }): Bildirim bloğunu oluşturur. Kurallarımız bu parantezlerin arasına yazılır. - Özellik (
color): Değiştirmek istediğimiz stilin adıdır. Burada metin rengi özelliğini seçtik. - Değer (
red): Özelliğe atadığımız karşılıktır. Rengin kırmızı olmasını istedik. Not: Her özellik ve değer arasına iki nokta üst üste (:), her kuralın sonuna ise noktalı virgül (;) konulmalıdır.
3. HTML Sayfalarına CSS Ekleme Yöntemleri
HTML belgenize CSS kodlarını dahil etmenin (eklemenin) 3 farklı yöntemi vardır. Her yöntemin kullanılması gereken farklı durumlar bulunur.
Yöntem 1: Harici CSS (External CSS) – En Çok Önerilen
Harici CSS, stil kodlarınızı HTML dosyanızdan tamamen bağımsız, sonu .css (örneğin: stil.css) ile biten ayrı bir dosyaya yazmanız anlamına gelir. Daha sonra bu dosyayı HTML sayfanıza bağlarsınız.
Profesyonel web geliştiricilerinin tamamı bu yöntemi kullanır. Eğer 100 sayfalık bir web siteniz varsa ve tüm sitedeki yazı rengini değiştirmek istiyorsanız, sadece bu tek CSS dosyasında değişiklik yapmanız yeterlidir; 100 sayfa anında güncellenir.
Nasıl Eklenir? Harici CSS dosyasını HTML’e bağlamak için <head> etiketleri arasında <link> elementi kullanılır.
HTML Dosyamız (index.html):
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>İlk Web Sitem</title>
<!-- CSS dosyamızı link etiketi ile bağlıyoruz -->
<link rel="stylesheet" href="stil.css">
</head>
<body>
<h1>Harici CSS ile Başlık</h1>
<p>Bu paragraf harici bir stil dosyasından renk alıyor.</p>
</body>
</html>
CSS Dosyamız (stil.css):
body {
background-color: lightgray;
}
h1 {
color: darkblue;
text-align: center;
}
Yöntem 2: Dahili CSS (Internal / Embedded CSS)
Dahili CSS, kodlarınızı harici bir dosyaya yazmak yerine, doğrudan o an üzerinde çalıştığınız HTML dosyasının içine yazma yöntemidir.
Eğer sadece tek bir sayfadan oluşan bir web siteniz varsa veya sitenizdeki tek bir sayfanın kendine has, diğerlerinden farklı bir tasarımı olmasını istiyorsanız bu yöntemi kullanabilirsiniz.
Nasıl Eklenir? Dahili CSS kodları, HTML belgesinin <head> (başlık) kısmı içerisinde <style> etiketi açılarak yazılır.
Örnek Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dahili CSS Örneği</title>
<!-- CSS kodlarımız style etiketi içinde -->
<style>
body {
background-color: linen;
}
p {
color: maroon;
font-size: 18px;
}
</style>
</head>
<body>
<p>Bu paragraf, aynı sayfanın içindeki style etiketinden şekil alıyor.</p>
</body>
</html>
Yöntem 3: Satır İçi CSS (Inline CSS)
Satır İçi CSS, kuralları genel bir blok olarak yazmak yerine, doğrudan ilgili HTML etiketinin tam kalbine, style niteliği (attribute) kullanılarak yazılmasıdır.
Bu yöntem en az önerilen yöntemdir. Neden mi? Çünkü kod tekrarına (“DRY – Don’t Repeat Yourself” kuralının ihlaline) yol açar, HTML dosyanızı karmakarışık bir hale getirir ve bakımı çok zordur. Sadece çok hızlı bir test yaparken veya e-posta şablonları (HTML email) hazırlarken kullanılması tavsiye edilir.
Nasıl Eklenir? Doğrudan HTML etiketinin içine style="..." yazarak kullanılır.
Örnek Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Satır İçi CSS Örneği</title>
</head>
<body>
<!-- CSS kuralı doğrudan etiketin içine yazıldı -->
<h1 style="color: red; text-align: center;">Kırmızı ve Ortalanmış Başlık</h1>
<p style="font-weight: bold; color: green;">Bu metin kalın ve yeşil renklidir.</p>
</body>
</html>
Hangi CSS Ekleme Yöntemini Seçmelisiniz?
SEO uyumluluğu, kodun temizliği (clean code) ve sitenin hızla yüklenebilmesi açısından her zaman Harici CSS (Yöntem 1) tercih edilmelidir. Arama motorları (Google vb.) sitenizi tararken kodların düzenli ve okunabilir olmasına büyük önem verir. HTML kodlarının arasında yüzlerce satır satır içi (inline) CSS kodu olması, sayfa boyutunuzu şişirir ve SEO performansınızı (Core Web Vitals skorlarınızı) olumsuz etkiler.
Ayrıca CSS’in “Basamaklı” (Cascading) doğası gereği bir öncelik sırası vardır. Eğer aynı öğeye farklı yöntemlerle farklı renkler verirseniz, tarayıcı en çok HTML etiketine yakın olanı seçer: Satır İçi CSS > Dahili CSS > Harici CSS
Örneğin, harici CSS dosyanızda başlıklar mavidir ama siz gidip HTML içinde satır içi olarak style="color: red;" yazarsanız, o başlık kırmızı olur. Bu durum, gelecekte tasarımsal hataları bulmayı (hata ayıklamayı) çok zorlaştırabilir, bu yüzden satır içi CSS kullanımından kaçınmak en iyi pratiklerden biridir.
Sonuç
Web geliştirme alanında uzmanlaşmak için HTML ve CSS ikilisi birbirini tamamlayan vazgeçilmez parçalardır. HTML ile sitenizin anlamlı ve sağlam bir yapısını (temelini) kurarken, CSS ile bu yapıya ruh, estetik ve kullanıcı dostu bir arayüz kazandırırsınız. Artık CSS’in ne olduğunu ve bir web sayfasına nasıl entegre edildiğini öğrendiniz. Yukarıdaki örnekleri kendi bilgisayarınızda bir .html ve .css dosyası oluşturarak denemeye başlayabilir ve kendi dijital şaheserlerinizi renklendirebilirsiniz!
Bir Yorum
CSS candır