Sözlük · C

CSS Nedir? Tanımı, Nasıl Çalışır ve Web Tasarımında Kullanımı

CSS (Cascading Style Sheets), web sayfalarının görünümü ve tasarımını kontrol etmek için kullanılan stil sayfası dilidir. HTML tarafından oluşturulan yapıyı renk, yazı tipi, boşluk ve animasyonlar gibi özelliklerle şekillendirir. Web geliştirmede HTML'nin yapısı ile CSS'nin stilinin birlikte kullanılması profesyonel ve uyumlu sayfalar oluşturmayı sağlar.

• • 5 dk okuma
CSS

CSS (Cascading Style Sheets), web sayfalarının görünümünü, rengini, yazı tipini, düzenini ve konumlandırmasını kontrol etmek için kullanılan stil sayfası dilidir. HTML tarafından oluşturulan sayfa yapısını alarak, her bir öğeye tasarım özellikleri uygular. Web tarayıcısında açılan bir sayfa profesyonel, düzenli ve kullanıcı dostu görünmesini sağlayan temel teknolojilerden biridir.

CSS Nasıl Çalışır

CSS, seçiciler (selectors) ve özellikler (properties) olmak üzere iki temel bileşenden oluşur. Seçici, stilin hangi HTML öğesine uygulanacağını belirtir; özellik ise o öğenin nasıl görüneceğini tanımlar.

Örneğin, tüm <p> etiketlerinin mavi renkte ve 16 piksel yazı boyutunda görünmesini istiyorsanız:

p {
  color: blue;
  font-size: 16px;
}

Web tarayıcısı bu kuralları okumuş ve HTML sayfasındaki tüm paragrafları belirtilen şekilde gösterir. CSS, hiyerarşik (cascade) yapı içerir; aynı öğeye uygulanan birden fazla kural varsa, daha spesifik olan kural geçerli olur.

CSS'i Sayfaya Eklemenin Yolları

  • İç CSS (Internal CSS): <style> etiketi içinde yazılır, sayfa başının <head> bölümüne eklenir.
  • Dış CSS (External CSS): Ayrı bir .css dosyasında yazılıp HTML sayfasında <link> etiketi ile bağlanır. En yaygın ve önerilen yöntemdir.
  • İnline CSS: Doğrudan HTML öğesinin style özelliğine yazılır; en az tavsiye edilen yöntemdir.

CSS'in Avantajları

  • Tasarım ve İçeriğin Ayrılması: HTML yapısı ile tasarım kodu ayrı tutulur, kodun bakımı kolaylaşır.
  • Yeniden Kullanılabilirlik: Bir .css dosyası birden fazla sayfada kullanılabilir.
  • Hızlı Değişiklik: Tüm sayfalar için tasarım değişikliği tek dosyada yapılır.
  • Responsive Tasarım: Media queries ile farklı cihazlara uyumlu (duyarlı) sayfalar oluşturulabilir.
  • Performans: Dış CSS dosyası bir kez indirilir ve tarayıcıda önbelleğe alınır.

CSS'in Dezavantajları

  • Browser Uyumluluğu: Eski tarayıcılar bazı CSS özelliklerini desteklemeyebilir.
  • Cascading Karmaşıklığı: Hiyerarşik yapı karmaşık projelerde çatışma ve beklenmeyen sonuçlara neden olabilir.
  • Debugging Zorluk: Tasarım sorunlarını bulup çözmek bazen zaman alıcı olabilir.

CSS'in Temel Özellikleri

Özellik Türü Örnekler Açıklama
Renk ve Arkaplan color, background-color, background-image Yazı rengi, arka plan rengi ve görseli ayarlar.
Yazı Tipi font-family, font-size, font-weight Yazı türü, boyutu ve kalınlığını kontrol eder.
Düzen ve Boşluk margin, padding, width, height Elemanların boyutunu, dış ve iç boşluğunu ayarlar.
Konumlandırma position, top, left, z-index Elemanları sayfada nereye yerleştireceğini belirtir.
Animasyon ve Geçiş animation, transition, transform Elemanlar arasında pürüzsüz hareketler ve efektler oluşturur.

CSS Türleri ve Seviyeleri

  • CSS1 (1996): İlk sürüm, basit stillendirme özellikleri içeriyordu.
  • CSS2 (1998): Konumlandırma, tabletler ve ses stilleri eklendi.
  • CSS2.1 (2011): Hata düzeltmeleri ve netleştirmeler yapıldı.
  • CSS3 (2018-): Modüler yapı, Flexbox, Grid, animasyonlar ve modern tasarım araçları eklendi. Hala geliştirilmeye devam ediliyor.

Modern CSS Teknikleri

  • Flexbox: Esnek kutular oluşturarak elemanları satır veya sütun halinde hizalamayı sağlar.
  • CSS Grid: İki boyutlu ızgara sistemini kullanarak karmaşık düzenler yaratır.
  • Media Queries: Ekran boyutuna göre farklı stiller uygulanmasını sağlar (responsive tasarım).
  • CSS Variables (Custom Properties): Tekrar kullanılabilir değişkenler tanımlanabilir.
  • Transforms ve Animations: 2D/3D dönüşümler ve hareket efektleri oluşturulabilir.
"CSS olmaksızın modern web tasarımı mümkün değildir. HTML yapı sağlar, CSS onu güzel kılar ve JavaScript onu etkileşimli hale getirir."

CSS Nerede Kullanılır

  • Web Siteleri: Tüm web siteleri CSS kullanarak tasarlanır.
  • Web Uygulamaları: Dinamik ve etkileşimli uygulamalar CSS ile stillendirilir.
  • E-ticaret Platformları: Ürün sayfaları, sepet ve ödeme alanları CSS ile tasarlanır.
  • Mobil Web (Responsive): Tablet ve telefon ekranlarına uyumlu tasarımlar CSS media queries ile oluşturulur.
  • E-posta Şablonları: HTML e-postalarda stil uygulamak için CSS kullanılır.
  • Belge Stillemesi: Baskı işlemleri ve PDF çıktıları için CSS özellikleri vardır.
CSS ve HTML arasındaki fark nedir?+
HTML sayfanın yapısını ve içeriğini oluşturur (başlık, paragraf, resim gibi öğeler), CSS ise bu öğelerin görünümünü kontrol eder (renk, yazı tipi, boşluk vb.). Kısaca HTML "ne" sorusuna, CSS "nasıl görünecek" sorusuna cevap verir.
CSS'i öğrenmesi kolay mıdır?+
CSS temellerini öğrenmek oldukça kolaydır; seçiciler ve temel özellikler birkaç hafta içinde öğrenilebilir. Ancak Flexbox, Grid ve responsive tasarım gibi ileri konular daha fazla pratik gerektirir. Düzenli çalışmayla hızlı ilerleme sağlanabilir.
Responsive tasarım CSS ile nasıl yapılır?+
Media queries kullanarak ekran boyutuna göre farklı stiller uygulanabilir. Örneğin @media (max-width: 768px) yazılarak tablet ve telefon ekranları için ayrı kurallar tanımlanır. Böylece site tüm cihazlarda düzgün görünür.
CSS framework nedir ve neden kullanılır?+
Bootstrap, Tailwind CSS gibi çerçeveler, sık kullanılan CSS kodlarının hazır paketleridir. Tasarımcılar sıfırdan kod yazmak yerine bu hazır sınıfları kullanarak hızlı şekilde profesyonel sayfalar oluşturabilirler ve geliştirme süresi kısalır.
Eski tarayıcılarda CSS desteği nasıl kontrol edilir?+
Feature detection araçları (Modernizr gibi) veya @supports kuralı kullanılarak tarayıcı desteği kontrol edilebilir. Ayrıca CSS fallback (yedek) özellikleri yazarak eski tarayıcılarda da sayfa kullanılabilir durumda kalabilir. Örneğin Grid desteği yoksa Flexbox alternatifi sağlanabilir.

C harfindeki diğer terimler

CSV
CSV (Comma-Separated Values), verilerin virgülle ayrılmış biçimde saklandığı basit bir metin tablosu formatıdı...
Chrome
Chrome, Google tarafından 2008 yılında geliştirilen açık kaynak kodlu web tarayıcısıdır. İnternet sayfalarını ...
Container (Docker)
Container (Docker), bir uygulama ile onun çalışması için gerekli tüm bileşenleri (kod, kütüphaneler, araçlar, ...
Cookie
Cookie, web sunucusu tarafından kullanıcının tarayıcısına gönderilen ve cihazda saklanan küçük veri dosyasıdır...
CRUD
CRUD, yazılım geliştirmede veri yönetiminin temelini oluşturan dört temel operasyonun kısaltmasıdır: Create (o...
Crawler
Crawler, web sayfalarını otomatik olarak ziyaret ederek bağlantıları takip eden yazılım aracıdır. Arama motorl...
Tüm sözlüğe dön →