Tamer Çelenk

Web geliştirmede, her öğe kendi işlevini yerine getiren ve birbirinden bağımsız olan bir yapıyı oluşturur. Ancak, bu öğelerin bir araya geldiğinde estetik ve uyumlu bir şekilde görüntülenmesi gerekir. İşte burada CSS (Cascading Style Sheets) devreye girer. CSS, web sayfalarının görsel tasarımını yapmak için kullanılan bir stil sayfası dilidir. HTML, web sayfalarının yapısını oluştururken, CSS sayfanın tasarımını, stilini ve düzenini belirler. Bu yazıda CSS’in ne olduğunu, nasıl çalıştığını ve web tasarımındaki rolünü detaylı bir şekilde ele alacağız.

CSS Nedir?

CSS (Cascading Style Sheets), HTML ve XML belgelerine stil ve biçim eklemek için kullanılan bir dildir. CSS, web sayfasındaki metin, renk, düzen, yazı tipi, arka plan, kenarlıklar, boşluklar gibi görsel özellikleri tanımlar. CSS, her bir öğenin nasıl görüneceğini belirlemek için kullanılır, ancak sayfanın yapısını değiştirmez. Bu, web geliştiricilerine aynı sayfa üzerinde birçok farklı görsel tasarımı daha kolay bir şekilde oluşturma imkânı tanır.

Özetle, CSS:

• Web sayfalarının stilini belirler.
• Sayfa öğelerinin düzenini, renklerini, boyutlarını, yazı tiplerini ve daha fazlasını kontrol eder.
• Sayfa içeriklerinin daha okunabilir ve kullanıcı dostu olmasını sağlar.

CSS’in Temel Avantajları

CSS, web geliştirme sürecinde pek çok avantaj sağlar. İşte başlıca avantajları:

1. Görsel Ayrım: CSS, tasarım ve içerik arasındaki ayrımı netleştirir. HTML, sayfanın yapısını tanımlar, CSS ise sayfanın görsel tasarımını ve stilini oluşturur. Bu, sayfa içeriğinin değiştirilmeden sadece stilin güncellenebilmesini sağlar.
2. Daha Hızlı Yüklenme: CSS, sayfanın stilini belirlemek için kullanılan bir stil sayfası dilidir ve HTML’den bağımsızdır. Bir stil dosyası, birden fazla sayfada kullanılabilir, bu da sayfaların hızlı yüklenmesini sağlar.
3. Mobil Uyumluluk: CSS medya sorguları sayesinde web sayfaları, farklı ekran boyutlarına (cep telefonları, tabletler, masaüstü bilgisayarlar vb.) uyum sağlayacak şekilde tasarlanabilir. Bu da daha iyi bir kullanıcı deneyimi sunar.
4. Kolay Bakım ve Güncellemeler: Tek bir CSS dosyası, tüm site genelindeki stil değişikliklerini kontrol eder. Bu, stil değişikliklerinin sadece bir yerden yapılmasını sağlar, böylece sayfa genelinde tutarlılık sağlanır ve bakım daha kolay olur.

CSS ile Neler Yapılabilir?

CSS, web sayfalarının görünümünü şekillendirmek için çeşitli özellikler ve işlevler sunar. İşte CSS ile yapılabilecek başlıca işlemler:

1. Yazı Tipi ve Metin Stilleri

• CSS ile sayfadaki yazı tipi, font boyutu, rengi, satır aralığı, harf aralığı gibi metin özellikleri değiştirilebilir.
• Örnek:

p { 
	font-family: Arial, sans-serif; 
	font-size: 16px; 
	color: #333; 
}

2. Renkler ve Arka Planlar

• CSS, sayfanın arka plan rengini, resmini veya desenini değiştirmek için kullanılır.
• Örnek:

body { 
	background-color: #f0f0f0; 
	background-image: url('background.jpg'); 
}

3. Kutular ve Kenarlıklar (Box Model)

• CSS’in en temel özelliklerinden biri box modeldir. Bir öğe, kenarlıklar, dolgu (padding), içerik ve dış boşluk (margin) ile çevrilidir. CSS ile bu öğelerin boyutları ve yerleşimi kolayca ayarlanabilir.
• Örnek:

div { 
	padding: 20px; 
	margin: 15px; 
	border: 1px solid #000; 
}

4. Düzen (Layout)

• CSS, web sayfasındaki öğelerin düzenini yönetmek için kullanılır. Öğeler yatay veya dikey olarak hizalanabilir, farklı yerleşim teknikleri (flexbox, grid) kullanılabilir.
• Örnek (Flexbox):

.container { 
	display: flex; 
	justify-content: space-between; 
}

5. Animasyonlar ve Geçişler

• CSS ile öğelere animasyonlar eklenebilir. Hover efektleri, geçişler, hareketli içerikler gibi etkileşimler CSS ile yapılabilir.
• Örnek (Geçiş):

button { 
	transition: background-color 0.3s ease; 
}

button:hover {
	background-color: #007bff; 
}

CSS Syntax (Yazım Kuralları)

CSS, belirli bir sözdizimiyle yazılır. CSS kuralları şu yapıdan oluşur:

selector {
    property: value;
}

• Selector (Seçici): Stil uygulanacak HTML öğesini belirtir. Örneğin, p, .class, #id.
• Property (Özellik): Değiştirilecek stil özelliğidir (örneğin, color, font-size, margin).
• Value (Değer): Özelliğin alacağı değeri belirtir (örneğin, red, 16px, auto).

Örnek:

h1 {
    color: blue;
    font-size: 24px;
}

CSS’in Çeşitli Uygulama Yöntemleri

CSS’i HTML belgelerine dahil etmek için birkaç yöntem vardır:

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

• HTML öğelerine doğrudan style özelliği ile stil uygulanabilir.
• Örnek:

<p style="color: red; font-size: 20px;">Bu bir paragraftır.</p>

2. Internal CSS (Dahili CSS)

• HTML belgesinin <head> kısmında, <style> etiketi içinde CSS yazılabilir.
• Örnek:

<style> body { background-color: #f0f0f0; } </style>

3. External CSS (Harici CSS)

• CSS kuralları ayrı bir .css dosyasında yazılır ve HTML dosyasına bağlantı kurularak kullanılır.
• Örnek:

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

Sonuç

CSS, web tasarımında en temel ve güçlü araçlardan biridir. Web sayfalarının görsel tasarımını oluşturmak, düzeni yönetmek ve kullanıcı etkileşimlerini sağlamak için vazgeçilmezdir. HTML, sayfanın yapısını belirlerken, CSS sayfanın görünümünü şekillendirir. CSS ile web sayfalarını daha estetik, kullanıcı dostu ve profesyonel hale getirebiliriz. Hem masaüstü hem de mobil uyumluluk için CSS, modern web tasarımının vazgeçilmez bir parçasıdır.