CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini tanımlamak için kullanılan bir stil dilidir. HTML’in yapısal işlevini tamamlayarak, içerik ve sunum arasındaki ayrımı sağlar. Web tasarımında kullanılan temel teknolojilerden biri olan CSS, bir web sayfasının estetik yönlerini kontrol etmek için kullanılır. Renkler, yazı tipleri, kenarlıklar, arka planlar, düzenler ve diğer görsel unsurlar CSS ile tanımlanır.
CSS’in gücü, web sayfalarının her yönünü özelleştirilebilmesine imkan tanımasının yanı sıra, kodun daha düzenli, bakımının kolay ve sayfanın hızlı yüklenmesine olanak tanımasıdır.
CSS’in Temel Özellikleri
CSS, web sayfasının stilini (görsel tasarımını) tanımlamak için çeşitli özellikler sunar. CSS’in temel avantajları ve kullanım alanları şunlardır:
- Web Sayfası Tasarımını Kontrol Etme
CSS, web sayfasındaki öğelerin (metin, resimler, düğmeler, menüler vb.) yerleşimini, boyutlarını, renklerini, yazı tiplerini ve diğer görsel özelliklerini kontrol etmek için kullanılır. HTML sadece içeriği tanımlar, CSS ise içeriğin nasıl görüneceğini belirler. - Küresel Stil Uygulama
CSS, bir web sayfasındaki tüm öğelere aynı stilin uygulanmasını sağlar. Örneğin, tüm başlıkların belirli bir fontla yazılmasını istiyorsanız, sadece bir CSS kuralı kullanarak bu stili tüm başlıklara uygulayabilirsiniz. Bu, bakım ve değişiklik yapmayı kolaylaştırır. - Duyarlı (Responsive) Tasarım
CSS ile, sayfanın tasarımını farklı ekran boyutlarına ve cihazlara uyumlu hale getirebilirsiniz. Bu, web sitenizin mobil cihazlarda, tabletlerde ve masaüstü bilgisayarlarda düzgün görüntülenmesini sağlar. “Media queries” kullanarak sayfanın görünümünü ekran boyutuna göre değiştirebilirsiniz. - Seçiciler ve Spesifiklik
CSS, öğelere stil uygulamak için seçiciler (selectors) kullanır. Seçiciler, hangi öğelere stil uygulanacağını belirler. CSS’de seçicilerin uygulama önceliği, spesifiklik ve sıralama kurallarına göre belirlenir.
CSS’in Temel Bileşenleri
CSS, üç temel bileşenden oluşur:
- Seçici (Selector)
Seçici, stilin hangi HTML öğelerine uygulanacağını belirler. Örneğin, bir tüm<p>etiketlerine stil eklemek içinpseçicisi kullanılır. Seçiciler genellikle öğe adı, sınıf adı veya ID ile tanımlanabilir.p { font-size: 16px; color: #333; } - Özellik (Property)
Özellik, stilin neyi değiştireceğini belirtir. Örneğin,color,font-size,margin,paddinggibi özellikler, öğelerin görünümünü kontrol eder.color: #333; font-size: 16px; - Değer (Value)
Değer, özelliğe atanan belirli değeri ifade eder. Örneğin,font-size: 16px;satırında16pxdeğeri, yazı boyutunun 16 piksel olduğunu belirtir.font-size: 16px; color: #333;
CSS Dosyaları
CSS stilleri, genellikle üç şekilde uygulanabilir: dahili (inline), içerik içinde (internal) ve harici (external).
- Dahili Stil (Inline Styles)
HTML öğelerine doğrudan stil uygulamak için kullanılır. Ancak, genellikle çok tercih edilmez çünkü stil ve içerik arasında karışıklık oluşturur ve kodun bakımını zorlaştırır.<p style="color: red; font-size: 16px;">Bu bir yazıdır.</p> - İçerik İçinde Stil (Internal Styles)
HTML sayfasının<head>kısmında yer alan<style>etiketi içinde CSS kuralları tanımlanabilir. Bu yöntem, tek bir sayfa için geçerli olacak stiller oluşturmak için uygundur.<style> body { background-color: #f4f4f4; } h1 { color: blue; } </style> - Harici Stil (External Styles)
CSS kuralları, harici bir.cssdosyasına yazılabilir ve HTML sayfasına bağlanabilir. Bu, tüm sayfalarda ortak bir stil kullanmak için tercih edilen yöntemdir. Web sitenizin tasarımını merkezi bir noktadan yönetmek, bakımını ve güncellenmesini çok daha kolay hale getirir.<link rel="stylesheet" type="text/css" href="style.css">
CSS ile Stil Uygulama Örnekleri
1. Metin Stilleri
CSS, metinlerin rengini, yazı tipini, boyutunu ve hizalamasını kontrol etmek için yaygın olarak kullanılır.
h1 {
font-family: 'Arial', sans-serif;
font-size: 36px;
color: #333;
text-align: center;
}
2. Arka Plan Rengi ve Görseller
Web sayfalarına renkli arka planlar veya görseller eklemek için CSS kullanılır.
body {
background-color: #f4f4f4;
background-image: url('background.jpg');
background-size: cover;
}
3. Kutular ve Kenarlıklar
CSS ile öğelere kenarlıklar, dolgular (padding), ve dış boşluklar (margin) eklenebilir.
div {
padding: 20px;
margin: 10px;
border: 2px solid #ccc;
}
4. Flexbox ile Düzenleme
Flexbox, öğeleri esnek bir şekilde hizalamak ve yerleştirmek için kullanılan bir tekniktir.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
5. Duyarlı (Responsive) Tasarım
Media queries, sayfanın görünümünü ekran boyutuna göre değiştirmeye yardımcı olur.
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
CSS’in İleri Seviye Özellikleri
- CSS Grid
CSS Grid, karmaşık düzenler oluşturmak için kullanılan güçlü bir tekniktir. Grid, sayfanın tüm öğelerini satırlar ve sütunlar halinde düzenler..grid-container { display: grid; grid-template-columns: auto auto auto; gap: 10px; } - Transitions ve Animations
CSS ile sayfa öğelerine geçiş efektleri ve animasyonlar eklemek mümkündür..box { transition: all 0.3s ease-in-out; } .box:hover { transform: scale(1.1); } - CSS Variables (Özellik Değişkenleri)
CSS değişkenleri, aynı değeri birden fazla yerde kullanmak için tanımlanabilir. Bu, stilinizi daha tutarlı ve yönetilebilir hale getirir.:root { --main-color: #3498db; } .button { background-color: var(--main-color); }
CSS, web geliştirme sürecinde çok önemli bir rol oynamaktadır. HTML ile birlikte, web sayfalarının içerik ve görsel tasarımını ayrı tutarak, daha temiz ve sürdürülebilir bir kod yapısı oluşturulmasını sağlar. CSS ile, web sayfalarını dinamik ve interaktif hale getirmek, kullanıcı dostu ve estetik tasarımlar yapmak mümkündür. CSS’in gelişen özellikleri ve esneklikleri sayesinde, modern web tasarımının temel taşlarından biri olmaya devam etmektedir.
