CSS, yani Cascading Style Sheets (Basamaklı Stil Sayfaları), web sitelerinin görsel sunumunu kontrol etmek için kullanılan bir stil dili'dir. HTML, web sayfasının içeriğini tanımlarken, CSS bu içeriğin nasıl görüneceğini belirler. Yazı tipleri, renkler, düzen, boyutlar ve daha fazlası CSS ile kontrol edilebilir. Bu makalede, CSS'in temellerini, temel kavramlarını ve web geliştirmedeki önemini inceleyeceğiz.
CSS'in Temel Yapısı
CSS kuralları, seçiciler ve bildirim bloklarından oluşur. Bir seçici, stil uygulamak istediğiniz HTML öğesini veya öğelerini hedefler. Bildirim bloğu ise, stil özelliklerini ve değerlerini içeren bir veya daha fazla bildirimden oluşur.
/* CSS Kuralı Örneği */h1 { color: blue; font-size: 36px;}
Bu örnekte:
h1: Seçicidir. Tüm <h1> etiketlerini hedefler.{ ... }: Bildirim bloğudur.color: blue;: Bir bildirimdir. color özellik, blue ise değerdir. Başlıkların metin rengini mavi yapar.font-size: 36px;: Başka bir bildirimdir. Başlıkların yazı boyutunu 36 piksel yapar.
CSS Seçicileri
CSS seçicileri, HTML öğelerini hedeflemenin çeşitli yollarını sunar. En yaygın seçici türleri şunlardır:
- Etiket Seçicileri (Type Selectors): Belirli bir HTML etiketini hedefler. Örneğin,
p tüm paragraf etiketlerini seçer. - Sınıf Seçicileri (Class Selectors): Belirli bir sınıfa sahip HTML öğelerini hedefler. Sınıflar, HTML etiketlerinde
class özelliği ile tanımlanır. Örneğin, .baslik sınıfına sahip tüm öğeleri seçer. - ID Seçicileri (ID Selectors): Belirli bir ID'ye sahip HTML öğesini hedefler. ID'ler, HTML etiketlerinde
id özelliği ile tanımlanır ve bir sayfada yalnızca bir kez kullanılabilir. Örneğin, #ana-baslik ID'sine sahip öğeyi seçer. - Evrensel Seçici (Universal Selector): Sayfadaki tüm HTML öğelerini hedefler.
* sembolü ile gösterilir. Genellikle varsayılan stilleri sıfırlamak için kullanılır. - Öznitelik Seçicileri (Attribute Selectors): Belirli bir özniteliğe sahip HTML öğelerini hedefler. Örneğin,
a[href] tüm bağlantı etiketlerini (<a>) seçer. - Birleştirici Seçiciler (Combinator Selectors): HTML öğeleri arasındaki ilişkilere göre seçim yapmaya olanak tanır.
- Descendant Selector (Boşluk): Belirli bir öğenin içindeki tüm belirtilen öğeleri seçer. Örneğin,
div p, bir <div> içindeki tüm <p> etiketlerini seçer. - Child Selector (>): Belirli bir öğenin doğrudan alt öğesi olan belirtilen öğeyi seçer. Örneğin, ¨C19C, bir ¨C20C'nin doğrudan alt öğesi olan tüm ¨C21C etiketlerini seçer.
- Adjacent Sibling Selector (+): Belirtilen öğeden hemen sonra gelen öğeyi seçer. Örneğin, ¨C22C, bir ¨C23C etiketinden hemen sonra gelen ¨C24C etiketini seçer.
- General Sibling Selector (~): Aynı ebeveyn öğesini paylaşan ve belirtilen öğeden sonra gelen tüm öğeleri seçer. Örneğin, ¨C25C, bir ¨C26C etiketinden sonra gelen ve aynı ebeveyne sahip tüm ¨C27C etiketlerini seçer.
CSS Nasıl Uygulanır?
CSS stilleri, üç farklı şekilde bir HTML sayfasına uygulanabilir:
- Satır İçi Stiller (Inline Styles): HTML etiketlerinin içinde
style özniteliği kullanılarak doğrudan uygulanır. Bu yöntem genellikle önerilmez, çünkü kodun okunabilirliğini ve bakımını zorlaştırır.<p style="color: red;">Bu metin kırmızı olacaktır.</p>
- Dahili Stiller (Internal Styles):
<style> etiketi içinde, HTML belgesinin <head> bölümünde tanımlanır. Bu yöntem, tek bir sayfanın stillerini tanımlamak için uygundur.<head> <style> h1 { color: green; } </style></head>
- Harici Stiller (External Styles): Ayrı bir
.css dosyası oluşturularak ve bu dosyanın HTML belgesine <link> etiketi ile bağlanmasıyla uygulanır. Bu, en yaygın ve önerilen yöntemdir, çünkü kodun düzenli ve bakımı kolay olmasını sağlar.<head> <link rel="stylesheet" href="stil.css"></head>
CSS'de Temel Kavramlar
CSS öğrenirken anlaşılması gereken bazı temel kavramlar şunlardır:
- Kaskad (Cascade): Birden fazla stil kaynağı bir öğeye stil uygulamaya çalıştığında, CSS'in hangi stilin uygulanacağını belirleme sürecidir. Öncelik sırası genellikle şöyledir: Satır içi stiller > Dahili/Harici Stiller > Tarayıcı Varsayılan Stilleri. Daha spesifik seçiciler, daha az spesifik olanlara göre önceliğe sahiptir.
!important kuralı kullanılarak bir stilin önceliği artırılabilir, ancak bu genellikle tavsiye edilmez. - Özgüllük (Specificity): Bir seçicinin ne kadar belirli olduğunu ölçen bir değerdir. Daha özgül seçiciler, daha az özgül olanlara göre önceliğe sahiptir. Örneğin, bir ID seçicisi (
#id) bir sınıf seçicisinden (.class) daha özgüldür. - Kalıtım (Inheritance): Bazı CSS özellikleri, bir öğeden alt öğelerine otomatik olarak aktarılır. Örneğin, bir
<div> öğesine uygulanan font-family özelliği, o <div> içindeki tüm metinlere de uygulanır. Kalıtımı engellemek için inherit: initial; kullanılabilir. - Kutu Modeli (Box Model): Her HTML öğesi, bir kutu olarak kabul edilir. Bu kutu, içerik (content), dolgu (padding), kenarlık (border) ve dış boşluktan (margin) oluşur. Kutu modelini anlamak, öğelerin düzenini ve boyutlarını kontrol etmek için önemlidir.
CSS ile Düzenleme (Layout)
CSS, web sayfalarının düzenini oluşturmak için çeşitli özellikler sunar. En yaygın kullanılan düzenleme teknikleri şunlardır:
- Float: Öğeleri sola veya sağa yaslayarak metinlerin etrafında akmasını sağlar. Geçmişte düzenleme için yaygın olarak kullanılıyordu, ancak günümüzde daha gelişmiş teknikler tercih edilmektedir.
- Positioning: Öğelerin konumunu belirlemek için kullanılır.
static (varsayılan), relative, absolute, fixed ve sticky gibi farklı değerleri vardır. absolute ve fixed konumlandırma, öğeleri normal akıştan çıkarır ve sayfanın herhangi bir yerine yerleştirmeyi sağlar. - Flexbox: Esnek kutu modeli, karmaşık düzenleri kolayca oluşturmak için tasarlanmıştır. Öğeleri bir konteyner içinde hizalamak, dağıtmak ve sıralamak için güçlü özellikler sunar.
- Grid: İki boyutlu bir düzenleme sistemidir. Satırlar ve sütunlar oluşturarak öğeleri hassas bir şekilde yerleştirmeyi sağlar. Karmaşık ve duyarlı (responsive) düzenler için idealdir.
CSS'in Önemi
CSS, modern web geliştirmenin ayrılmaz bir parçasıdır. İşte CSS'in neden bu kadar önemli olduğuna dair bazı nedenler:
- Görsel Sunumu Kontrol Eder: CSS, web sitelerinin görünümünü ve hissini tamamen kontrol etmenizi sağlar. Renkler, yazı tipleri, düzenler ve diğer görsel öğeler CSS ile ayarlanabilir.
- Kodun Yeniden Kullanılabilirliğini Artırır: CSS stillerini ayrı bir dosyada tanımlayarak, aynı stilleri birden fazla sayfada kullanabilirsiniz. Bu, kodun tekrarını azaltır ve bakımını kolaylaştırır.
- Duyarlı Tasarımı Kolaylaştırır: CSS medya sorguları (media queries) ile, web sitenizin farklı ekran boyutlarına ve cihazlara uyum sağlamasını sağlayabilirsiniz. Bu, kullanıcı deneyimini önemli ölçüde iyileştirir.
- Erişilebilirliği Artırır: CSS, web sitenizin erişilebilirliğini artırmak için kullanılabilir. Örneğin, renk kontrastını ayarlayarak veya klavye navigasyonunu iyileştirerek, engelli kullanıcıların sitenizi daha kolay kullanmasını sağlayabilirsiniz.
- Arama Motoru Optimizasyonuna (SEO) Katkıda Bulunur: Temiz ve iyi yapılandırılmış CSS kodu, web sitenizin daha hızlı yüklenmesine ve daha iyi bir kullanıcı deneyimi sunmasına yardımcı olabilir. Bu da arama motoru sıralamalarınıza olumlu yansır.
Sonuç
CSS, web geliştirme sürecinde hayati bir rol oynar. Temel kavramlarını ve uygulama alanlarını anlamak, etkileyici ve kullanıcı dostu web siteleri oluşturmanıza olanak tanır. Bu makalede, CSS'in temellerine bir giriş yaptık. Daha fazla bilgi edinmek ve pratik yapmak için çeşitli online kaynaklardan ve eğitimlerden yararlanabilirsiniz.