Anasayfa

CSS’e Giriş ve Temel Mantık

css | nedir | web tabanlı uygulama geliştirme | web tasarım
Bu yazıda, CSS’in ne olduğu ve ne işe yaradığı, CSS ekleme yöntemleri, CSS yazım yapısı ve Seçici kavramına giriş konuları anlatılmaktadır.

CSS Nedir?

CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının tasarımını ve görsel düzenini kontrol etmek için kullanılan bir stil dilidir. HTML sayfanın yapısını oluştururken, CSS bu yapının nasıl görüneceğini belirler.

Daha basit bir ifadeyle; HTML sayfada hangi içeriklerin yer alacağını söyler, CSS ise bu içeriklerin renk, boyut, konum ve düzenini tanımlar.

CSS Ne İşe Yarar?

CSS kullanılarak web sayfalarına görsel düzen ve estetik kazandırılır. CSS’in sağladığı bazı temel avantajlar şunlardır:

  • Yazı tipi, renk ve boyut ayarlamaları yapılır
  • Sayfa düzeni ve hizalamalar kontrol edilir
  • Buton, menü ve formlar tasarlanır
  • Tek CSS dosyası ile tüm site yönetilir
  • Mobil uyumlu (responsive) tasarımlar oluşturulur

CSS Nasıl Kullanılır?

CSS, HTML belgelerine üç farklı yöntemle eklenebilir. Projenin büyüklüğüne göre uygun yöntem tercih edilmelidir.

1) Satır İçi CSS (Inline CSS)

CSS kuralları doğrudan HTML etiketinin içine yazılır. Küçük ve geçici işlemler dışında önerilmez. 

<p style="color:red; font-size:18px;">
  Merhaba CSS
</p>

Bu yöntemde tasarım ve içerik iç içe geçtiği için kodun yönetimi zorlaşır.

2) Sayfa İçi CSS (Internal CSS)

CSS kuralları <style> etiketi kullanılarak HTML sayfasının <head> bölümüne yazılır. 

<style>
  p {
    color: blue;
  }
</style>

Küçük projeler için uygundur ancak büyük projelerde tercih edilmez.

3) Harici CSS Dosyası (External CSS)

CSS kodlarının ayrı bir dosyada yazılıp HTML sayfasına bağlanmasıdır. En doğru ve en yaygın kullanılan yöntemdir. 

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

Bu yöntem sayesinde aynı CSS dosyası birden fazla sayfada kullanılabilir.

CSS’in Temel Yapısı

CSS kuralları belirli bir sözdizimine sahiptir. Her CSS kuralı üç ana bölümden oluşur. 

seçici {
  özellik: değer;
}

Örnek CSS Kuralı

h1 {
  color: green;
  font-size: 32px;
}
  • Seçici: Hangi HTML elemanının etkileneceğini belirtir
  • Özellik: Değiştirilecek stil özelliğidir
  • Değer: Özelliğin alacağı değeri ifade eder

CSS Seçicilere Giriş

CSS’te stil verebilmek için öncelikle hangi HTML elemanının seçileceği belirtilmelidir. Bu işlem CSS seçiciler kullanılarak yapılır. 

p {
  color: purple;
}

Bu kural, sayfadaki tüm <p> etiketlerinin yazı rengini mor yapar.