CSS, web sayfalarının görsel tasarımını oluşturmamıza yardımcı olan bir stil dilidir. Web sayfasındaki belirli elementleri seçerek onlara stil uygulamamıza olanak tanıyan “seçiciler” (selectors) CSS’in temel taşlarından biridir. Bu yazıda, CSS’de en sık kullanılan seçicileri ve bunları nasıl kullanabileceğimizi anlatacağız.
CSS Kuralları ve Seçiciler
CSS’de bir stil kuralı temel olarak şu şekilde yazılır:
p {
color: green;
font-size: 18px;
}
Burada “p” bir seçici, “color” ve “font-size” ise uygulanan stil özellikleridir. Seçiciler, sayfadaki hangi elementlere bu stilin uygulanacağını belirler. CSS’de farklı türde seçiciler bulunur.
1. Evrensel Seçici (Universal Selector)
Evrensel seçici, sayfadaki tüm HTML elementlerini seçmek için kullanılır. Evrensel seçici, yıldız (*) karakteriyle belirtilir.
* {
color: orange;
background-color: lightgray;
}
Bu kural, sayfadaki tüm elementlerin metin rengini turuncu, arka plan rengini ise açık gri yapar. Ancak evrensel seçici kullanırken dikkatli olunmalıdır. Çünkü bütün elementleri seçtiği için performans açısından verimli değildir. Genellikle sayfa genelinde uygulanacak stilleri belirlemek için daha spesifik seçiciler kullanılmalıdır.
2. Etiket (Element) Seçici
Etiket seçici, belirli bir HTML elementine stil vermek için kullanılır. Örneğin, sayfadaki tüm <h2> başlıklarını kırmızı yapmak istiyorsak şu şekilde bir kural yazabiliriz:
h2 {
color: red;
}
Aynı şekilde, tüm <input> elementlerini genişletmek için:
input {
width: 200px;
}
Bu kurallar, sayfadaki tüm h2 ve input elementlerine uygulanacaktır. Etiket seçici, CSS’de en yaygın kullanılan seçici türlerinden biridir.
3. Birden Fazla Seçici Kullanma (Virgül ile Kombinasyon)
CSS’de birden fazla elementi aynı anda seçmek için virgül (,) kullanabiliriz. Örneğin, hem <h3> hem de <h4> başlıklarını aynı renkte yapmak istersek:
h3, h4 {
color: darkred;
}
Bu kural, hem h3 hem de h4 elementlerini seçerek onları koyu kırmızı yapar.
Sonuç
Bu yazıda, CSS’in en temel seçicilerinden bazılarını inceledik:
- Evrensel Seçici (``) - Sayfadaki tüm elementleri etkiler (pek yaygın değil).
- Etiket Seçici (
h2, input vb.) - Belirli bir HTML elementine stil uygular (en yaygın seçicilerden biri).
- Virgül ile Birleştirme (
h3, h4) - Birden fazla elementi aynı anda seçerek ortak stil uygular.
Bu temel bilgilerle, CSS kullanarak sayfalarınıza daha fazla stil eklemeye başlayabilirsiniz. Bir sonraki adımda class ve id seçicileri, attribute seçicileri ve daha karmaşık seçicileri öğreneceğiz!