CSS Nedir?
İngilizce: CSS (Cascading Style Sheets)
CSS, HTML içeriğinin renk, tipografi, boşluk, konum ve responsive davranışını tarayıcıda tanımlayan web stil dilidir.
CSS Nedir?
CSS (Cascading Style Sheets), HTML ile oluşturulan içeriğin nasıl görüneceğini belirleyen stil dilidir. Başlıkların boyutu, buton rengi, grid düzeni, mobil kırılma noktaları, animasyonlar ve dark mode davranışı CSS ile tanımlanır.
Cascade Nasıl Çalışır?
CSS’de aynı elemente birden fazla kural uygulanabilir. Hangi kuralın kazanacağını kaynak sırası, specificity, inheritance ve !important gibi öncelikler belirler. “Cascading” adı buradan gelir: stiller yukarıdan aşağıya ve kurallar arası öncelikle birleşerek nihai görünümü oluşturur.
Temel Parçalar
- Selector: Hangi elementlerin hedefleneceğini seçer.
- Property: Değiştirilecek özelliği belirtir; örneğin
colorveyadisplay. - Value: Özelliğin değeridir; örneğin
red,grid,1rem. - Media query: Ekran veya cihaz koşuluna göre stil uygular.
- Layout: Flexbox, Grid ve position gibi araçlarla yerleşim kurar.
Modern CSS
Güncel CSS artık yalnızca renk ve boşluk vermekten ibaret değildir. Grid, flexbox, custom properties, container query, cascade layers ve :has() gibi özellikler component tabanlı arayüzleri daha az JavaScript ile kurmayı sağlar. Tailwind CSS gibi araçlar CSS yazma biçimini değiştirse de tarayıcıda çalışan çıktı yine CSS’tir.
İş Dünyasında Kullanımı
CSS kalitesi; marka tutarlılığı, erişilebilirlik, mobil kullanılabilirlik ve bakım maliyetini doğrudan etkiler. Dağınık selector yapısı veya kontrolsüz override’lar büyük web projelerinde küçük tasarım değişikliklerini bile riskli hale getirebilir.
İlgili Terimler
CSS animasyonu, öğelerin renk, konum, opaklık veya ölçek gibi özelliklerini zaman içinde değiştiren tarayıcı tabanlı hareket tekniğidir.
BootstrapBootstrap, hazır grid, bileşen ve yardımcı sınıflarla responsive web arayüzlerini hızlı kurmayı sağlayan açık kaynak CSS çatısıdır.
Container QueryContainer query, bir bileşenin stilini ekran genişliği yerine içinde bulunduğu kapsayıcının boyutuna göre değiştiren CSS özelliğidir.
CSS DeğişkenleriCSS değişkenleri, renk ve boşluk gibi tasarım değerlerini custom property olarak tanımlayıp tema ve bileşenlerde yeniden kullanır.
Dark ModeDark mode, arayüzün koyu zemin ve açık metinle sunulan temasıdır; kontrast, erişilebilirlik ve marka renkleriyle birlikte tasarlanmalıdır.
FlexboxFlexbox, CSS'te öğeleri tek eksende esnek biçimde hizalayan, boşluk dağıtan ve değişen içerik boyutlarına uyum sağlayan layout modelidir.
CSS GridCSS Grid, web arayüzlerinde satır ve sütun eksenlerini birlikte yöneterek esnek iki boyutlu yerleşimler kuran CSS sistemidir.
HTMLHTML, web sayfalarındaki başlık, paragraf, bağlantı, form ve medya gibi içeriklerin yapısını tanımlayan işaretleme dilidir.
Responsive TasarımResponsive tasarım, aynı web arayüzünün ekran genişliği, dokunmatik kullanım ve cihaz özelliklerine göre uyumlu yerleşim üretmesidir.
Tailwind CSSTailwind CSS, tasarım kararlarını küçük utility sınıflarına çevirerek arayüzleri HTML içinde tutarlı ve hızlı biçimde stillendiren CSS framework'üdür.