CSS ile HTML Öğelerini Seçme
Giriş
CSS’in temel işleyişi iki önemli kavram üzerine kuruludur: katmanlama (cascade) ve özgüllük (specificity).
Katmanlama, CSS kurallarının hangi sırayla okunup uygulanacağını belirler.
Özgüllük ise tarayıcıya, hangi elementin hedef alınacağını ve hangi stilin öncelikli olacağını söyler.
Bu sürecin başlangıç noktası seçicidir (selector) — yani “hangi HTML öğesini” biçimlendireceğimizi tanımlar.
Web sayfası büyüdükçe, düzeni korumak ve doğru stilleri uygulamak için daha özel seçiciler kullanmak gerekir.
Basitçe söylemek gerekirse: iyi bir CSS yazmak, doğru öğeleri doğru seçmekle başlar.
Doğru elementi seçmek ve ona uygun görsel stilleri vermek, CSS yazmanın temelidir.
Bir web sayfasındaki bir öğenin görünümünü değiştirmek istediğinde, bunu seçiciler (selectors) aracılığıyla yaparsın.
Bu rehber, doğru öğeyi doğru şekilde seçmeyi öğreterek daha estetik ve profesyonel web siteleri geliştirmeni sağlayacak.
İlk olarak, HTML elementlerini biçimlendirmek için tip seçicisini (type selector) nasıl kullanacağını öğreneceksin.
Ardından, birden fazla seçiciyi birleştirerek daha hedefli stiller uygulamayı göreceksin.
Son olarak, birden fazla seçiciyi gruplayarak aynı stili farklı elementlere nasıl verebileceğini keşfedeceksin.
Kısacası, bu bölüm CSS seçicilerini sadece öğretmekle kalmayacak; aynı zamanda tasarım sürecine bakış açını da genişletecek.
HTML Yapısını Hazırlama
İlk adımda, bu eğitim boyunca stiller uygulayacağın HTML yapısını oluşturacaksın.
Buradaki amaç, farklı elementler ve durumlar için örnek bir sayfa hazırlamak — yani CSS pratikleri için bir zemin oluşturmak.
Editöründe index.html dosyasını aç ve aşağıdaki temel HTML iskeletini ekle.
Bu yapı, sayfana gerekli başlangıç kodlarını sağlayacak:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Seçiciler Eğitimi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Sürdürülebilir Gelecek İçin Adımlar</h1>
</body>
</html>
Yukarıdaki HTML yapısında <link /> etiketi, styles.css dosyasını zaten yüklüyor.
Bu yüzden aynı klasörde styles.css dosyasının da hazır olduğundan emin olmalısın.
Şimdi sayfamıza biraz içerik ekleyelim.
<body> etiketinin içine bir başlık alanı (header) ve bir makale (article) ekleyerek başlayacağız.
<body>
<header>
</header>
<article>
</article>
</body>
<body> ve <header> etiketleri arasındaki ilişki, ebeveyn ve çocuk ilişkisi olarak adlandırılır.
Çünkü <header> etiketi, <body> etiketinin içinde yer alır.
Aynı şekilde, <header> ve <article> etiketleri de kardeş konumundadır,
çünkü ikisi de aynı seviyede, yani aynı üst etiketin (<body>) altındadır.
Şimdi sayfaya bir başlık vermek için <header> etiketinin içine bir alt öğe ekleyelim:
<header>
<h1>Sürdürülebilir Gelecek İçin Adımlar</h1>
</header>
<article> etiketinin içine dört alt öğe ekleyelim: bir <header> ve iki adet <section> elementi.
<article> etiketi, tarayıcılarda landmark (işaret noktası) olarak görev yapar.
Bu, özellikle erişilebilirlik teknolojileri kullanan kişiler için sayfa yapısının daha anlaşılır olmasını sağlar.
Bir landmark içinde yalnızca bir adet <header> etiketi bulunmalıdır.
Bu örnekte, o <header> etiketi makalenin başlığını içerecek.
Ardından gelen üç <section> etiketi ise farklı bilgi bloklarını barındıracak.
<article>
<header>
</header>
<section>
</section>
<section>
</section>
<section>
</section>
</article>
Şimdi, <article> içindeki <header> etiketine bir başlık ekleyelim.
Burada <h2> etiketi kullanmak mantıklı çünkü bu başlık, sayfanın ana başlığı olan <h1>’in hemen altındadır.
Ayrıca, “Sürdürülebilirlik” kelimesini vurgulamak için <strong> etiketiyle belirginleştirelim.
Sayfayı tarayıcıda açtığında bu metin henüz farklı görünmeyecek — çünkü tarayıcı şu anda varsayılan stilleri kullanıyor.
Birazdan CSS ile bu başlığı görsel olarak daha belirgin hale getireceğiz.
<article>
<header>
<h2><strong>Sürdürülebilirlik</strong> ve Geleceğimiz</h2>
</header>
...
</article>
Şimdi ilk section içeriğini ekleyelim.
Bu bölüm iki paragraftan oluşacak ve her biri <p> etiketleri içinde yer alacak.
Konu olarak “Mercan Resifleri” hakkında kısa bir açıklama yazalım.
İlk paragrafta bazı ifadeleri vurgulamak için <em> (italik vurgu) ve <strong> (kalın vurgu) etiketlerini kullanacağız.
<section>
<p>
<strong>Mercan resifleri</strong>, okyanus ekosistemlerinin en zengin ve en hassas yapılarından biridir.
<em>Binlerce deniz canlısı</em> için yaşam alanı oluştururlar ve denizlerin doğal dengesini korurlar.
</p>
</section>
İkinci section kısmında, bu bölüme özel bir başlık ekleyeceğiz.
Burada <h3> etiketi kullanacağız çünkü bu başlık, bir önceki <h2> başlığının alt konusu niteliğinde olacak.
Ayrıca, <h2>’de yaptığımız gibi başlığın bir kısmını <strong> etiketiyle vurgulayacağız.
Bu bölümde ayrıca bir madde listesi oluşturacağız.
Listeyi tanımlamak için <ul> etiketini, her maddeyi belirtmek için de <li> etiketini kullanacağız.
Listede yer alan maddelerden birini özellikle vurgulamak için <strong> etiketiyle belirgin hale getireceğiz.
...
<article>
<header>
...
</header>
<section>
...
</section>
<section>
<h3><strong>Mercan Resiflerini</strong> Korumak İçin Neler Yapabiliriz?</h3>
<ul>
<li>Plastik kullanımını azaltmak</li>
<li><strong>Denizleri kirletmemek</strong> ve atıkları doğru şekilde imha etmek</li>
<li>Sürdürülebilir turizmi desteklemek</li>
<li>Doğal yaşam alanlarını koruyan projelere katılmak</li>
</ul>
</section>
...
</article>
...
Son section kısmında, bir önceki bölüme benzer bir yapı oluşturacağız.
Yine bir <h3> başlık ekleyip, başlığın içindeki bir kelimeyi <strong> etiketiyle vurgulayacağız.
Fakat bu sefer sıralı bir liste (ordered list) kullanacağız.
Listeyi tanımlamak için <ol> etiketini, her maddeyi belirtmek için ise yine <li> etiketini kullanacağız.
Listede yer alan maddelerden birini vurgulamak için bir kez daha <strong> etiketiyle belirgin hale getireceğiz.
...
<article>
<header>
...
</header>
<section>
...
</section>
<section>
...
</section>
<section>
<h3><strong>Doğayı</strong> Korumak İçin Atabileceğimiz Adımlar</h3>
<ol>
<li>Geri dönüşüme önem vermek</li>
<li><strong>Enerji tasarrufu</strong> sağlayan ürünler tercih etmek</li>
<li>Toplu taşıma veya bisiklet kullanmak</li>
<li>Yerel üreticileri desteklemek</li>
</ol>
</section>
</article>
...
Dosyanı kaydetmeyi unutma.
Bu adımla birlikte, bu eğitimde kullanacağımız tüm HTML yapısını tamamlamış olduk.
Artık elimizde, CSS stillerini uygulayabileceğimiz sağlam bir temel var.
index.html dosyasını açık tut — ilerleyen adımlarda referans olarak kullanacağız.
Ardından dosyayı tarayıcında açarak, tarayıcının varsayılan stillerini nasıl uyguladığını görebilirsin.
Sayfa şu anda oldukça sade görünecek; başlıklar kalın, listeler madde işaretli ve yazılar siyah tonlarda olacaktır.
Birazdan CSS ile bu görünümü tamamen özelleştirip çok daha şık hale getireceğiz.
Şimdi HTML sayfanıza stil uygulayarak sayfanın görünümünü daha estetik hale getireceğiz.
Eleman Seçici (Type Selector) ile Öğeleri Seçme
Bu bölümde, eleman seçici ya da daha yaygın adıyla tip seçici ile çalışacağız.
Tip seçici, sayfadaki öğeleri etiket ismiyle bulur ve özgüllük (specificity) açısından en geniş seçim aracıdır.
Yani, tip seçici HTML sayfasındaki her öğeyi, belirli bir etiket ismiyle hedefler.
Bu bölümde, index.html sayfası üzerinde birkaç farklı tip seçici yazacağız. Böylece, bu seçicinin kapsamını ve nasıl kullanıldığını daha iyi anlayacağız.
İlk olarak, index.html dosyasını tarayıcıda açın.
Tarayıcı varsayılan stilleriyle nasıl göründüğünü inceleyin.
Bu varsayılan stiller, sayfa içeriğine görsel bilgi sağlamak için tarayıcı tarafından önceden belirlenmiş stillerdir.
Tarayıcı, başlıklar, paragraflar, listeler gibi temel öğelere temel stiller uygular — ancak bu stiller genellikle oldukça sade ve basittir.
Bu, stillerle başlamak için iyi bir yer olacaktır.
İlerleyen örneklerde, bu varsayılan görünümü sadece birkaç CSS özelliğiyle özelleştireceğiz.
Yani, temel yapı burada olacak, ancak sayfayı daha şık hale getirmek için düzenlemeler yapacağız.
Şimdi, styles.css dosyasını editörünüzde açın.
Varsayılan olarak, tarayıcılar genellikle serif fontlarını kullanır. Serif, harflerin uçlarındaki dekoratif detaylara verilen isimdir, örneğin Times New Roman fontunda olduğu gibi.
Sayfanın genelinde fontu değiştirmek için, fontu yalnızca bir kez değiştirebilirsiniz.
Bunun için, body etiketini hedef alarak bir tip seçici (type selector) oluşturacağız.
body {
font-family: sans-serif;
}
Yaptığınız değişiklikleri kaydedin ve styles.css dosyasını kaydettikten sonra, tarayıcıyı yenileyin.
Sayfadaki tüm metnin tarayıcının varsayılan sans-serif fontuna dönüştüğünü doğrulayın.
Bu değişikliğin sayfanın tamamında görünmesinin sebebi, CSS'teki inheritance (miras alma) özelliğidir.
Inheritance, bir çocuk öğe'nin, ebeveyn öğesi'nden özellik değerlerini devralmasıdır — tabii ki aksi belirtilmedikçe.
Bu özellik, tüm CSS özelliklerini etkilemez, ancak metinle ilgili özelliklerde çok belirgindir.
Şimdi, başlıkları (h2 ve h3) daha normal yapalım:
Tarayıcı, h2 ve h3 başlıklarına varsayılan olarak kalın (bold) stil uygular.
Bu durumu değiştirebilmek için, h2 ve h3 için birer tip seçici (type selector) oluşturacağız ve her birine font-weight: normal özelliğini ekleyeceğiz.
Bu, başlıkları varsayılan kalın font yerine normal ağırlıkta bir fonta dönüştürecek.
body {
font-family: sans-serif;
}
h2 {
font-weight: normal;
}
h3 {
font-weight: normal;
}
Değişikliklerinizi kaydedin ve index.html sayfasını tarayıcınızda yenileyin.
h2 ve h3 başlıklarının kalın fontlardan normal font ağırlığına dönüştüğünü göreceksiniz. Ancak, <strong> etiketindeki metinler kalın olmaya devam edecektir.
Bu durum, <strong> etiketinin font-weight için tarayıcıda varsayılan olarak belirli bir değer almış olmasından kaynaklanıyor.
Yani, <strong> etiketleri, ebeveynlerinden (bu durumda h2 ve h3) inheritance (miras alma) özelliğini devralmaz.
Tasarımın ana amacı, iletişimi daha verimli hale getirmektir. Bu örnekte, başlıkların font ağırlığı ile bir kontrast oluşturarak belirli bir içeriği vurgulamaya çalışıyoruz.
Şimdi, bu kontrastı daha da belirginleştirmek için renk ekleyeceğiz.
em {
background-color: yellow;
}
strong {
color: red;
}
styles.css dosyasını kaydedin ve index.html sayfanızı tarayıcınızda yenileyin.
Sayfadaki tasarım değişikliklerini görmek için şu adımları izleyebilirsiniz:
- Tüm metinler sans-serif fontuna dönüştü.
- h2 ve h3 başlıkları artık kalın değil, normal ağırlıkta görünüyor.
<strong>etiketindeki metinler kırmızı renkte vurgulanmış durumda.<em>etiketindeki metinlerin arka planı sarı renkte, yani highlight efekti uygulanmış.
Bu adımda, farklı tip seçiciler (type selectors) ile çalışarak her bir seçici için özgül stiller oluşturduk.
Tip seçici, tarayıcıya bir öğeyi öğenin ismiyle bulmasını söyler ve özgüllük açısından en geniş seçim aracıdır.
Şimdi, CSS'inizi daha basit ve düzenli hale getirebilmek için seçici gruplarını (selector groups) kullanmayı öğreneceksiniz.
Seçici gruplarını kullanarak, birden fazla öğeye aynı stil özelliklerini uygulayabiliriz ve böylece kodu daha verimli hale getirebiliriz.
Combinator Seçici ile Öğeleri Seçme
Bu bölümde, daha spesifik öğe seçimleri yapmak için combinator seçicisi ile çalışacağız.
Bu seçici, HTML öğelerinin iç içe geçmiş ilişkilerini kullanarak uygun öğeyi seçer.
Bu seçiciyi, aynı öğe türünün farklı öğe türleri içinde farklı görünmesini sağlamak için kullanacağız.
index.html dosyasını tarayıcıda açın.
Stil özelliklerine göz attığınızda, sayfadaki her <strong> öğesinin kırmızı renkte olduğunu göreceksiniz.
Bu, color: red; özelliğinin tüm <strong> etiketlerine uygulanmasından kaynaklanıyor.
Bu adımda, <strong> etiketlerinin rengini, sadece belirli koşullarda değiştireceğiz.
Örneğin, <strong> öğelerinin rengi, bulundukları diğer öğelere göre farklı olacak. Yani, <strong> etiketlerinin rengini, içeride oldukları elementlere göre özelleştireceğiz.
Bir combinator seçici, seçiciler arasına bir boşluk karakteri eklenerek tanımlanır ve HTML hiyerarşisi soldan sağa doğru okunur.
Sağdaki seçici, hedeflenen öğedir. Bu yapı, hedeflenen öğe için gerekli özgüllüğü sağlamak amacıyla basit veya karmaşık olabilir.
Combinator seçicilerin nasıl çalıştığını anlamak için, styles.css dosyasını açın ve dosyanın en altına şu kodu ekleyin:
p strong {
}
Bu, combinator seçicisidir ve <strong> öğelerini, <p> öğesinin soyundan gelen öğeleri hedef alır.
Bu, <p> öğesinin, <strong> öğesinin doğrudan ebeveyni olması gerekmediği anlamına gelir. Yani, <strong> öğesi <p> öğesinin içinde herhangi bir seviyede olabilir.
Şimdi, bu kriterlere uyan <strong> öğelerinin rengini değiştirelim.
Combinator seçicisini kullanarak, <strong> öğelerine bir renk özelliği (color) ekleyeceğiz.
Bu, combinator seçicisidir ve <strong> öğelerini, <p> öğesinin içinde bulunan öğeleri hedef alır.
Yani, <strong> öğesi <p> öğesinin içinde herhangi bir seviyede olabilir.
Şimdi, bu kritere uyan <strong> öğelerinin rengini değiştirelim.
Combinator seçicisini kullanarak, <strong> öğelerine bir renk özelliği (color) ekleyeceğiz.
p strong {
color: green;
}
Yaptığınız değişiklikleri kaydedin ve index.html sayfasını tarayıcınızda yenileyin.
Yenileme işlemi sonrasında, <p> öğelerinin içindeki <strong> öğelerinin renginin yeşil olduğunu görebilirsiniz.
Şimdi, dosya genelindeki <strong> öğelerine daha fazla renk çeşitliliği ekleyelim.
İlk olarak, <strong> öğesini <h3> etiketinin içinde bulunan öğeleri hedef alalım ve bu öğeleri mavi yapalım.
Bunun için combinator seçicisini kullanarak şu CSS kodunu ekleyebiliriz:
h3 strong {
color: blue;
}
Son olarak, biraz daha renk eklemek için <strong> öğelerinin renklerini değiştirelim.
İlk olarak, <ul> (sırasız liste) içindeki <strong> öğelerinin rengini sarı yapalım,
ve ardından <ol> (sıralı liste) içindeki <strong> öğelerinin rengini yeşil yapalım.
Bu işlemi şu şekilde basitleştirebiliriz:
ul strong {
color: yellow;
}
ol strong {
color: green;
}
Tarayıcınıza geri dönün ve sayfayı yenileyin.
Sırasız listedeki <strong> öğesi artık zengin açık mavi renkte,
ve sıralı listedeki <strong> öğesi ise yeşil renkte olacaktır.
Bu değişiklikler, sayfanızda sarı ve yeşil renklerinin başarıyla uygulanmış olduğunu gösteriyor.
Tarayıcıyı yenileyerek bu renk değişimlerini gözlemleyebilirsiniz.
Bu bölümde, combinator seçicisini öğrendiniz.
Bu seçiciyi, iki tip seçici ile birlikte birkaç kez kullanarak <strong> öğelerinin farklı örneklerine özel renkler uyguladınız.
Bir sonraki bölümde, CSS'inizi seçici grubu (selector group) kullanarak nasıl daha basit hale getirebileceğinizi öğreneceksiniz.
Bu yöntem, benzer stilleri birden fazla öğe türüne uygulamanızı sağlar ve CSS kodunuzu daha verimli hale getirir.
Birden Fazla Öğeyi Seçmek için Seçici Grubu Kullanma
Bu bölümde, seçici grubu kullanarak HTML öğelerini seçeceksiniz.
Programlamada "Don’t Repeat Yourself" (DRY) diye bir prensip vardır.
DRY kodunun amacı, daha sürdürülebilir ve bakım yapılabilir kod yazmaktır.
Seçici grubu, CSS yazarken DRY prensibini uygulamanın en hızlı yollarından biridir.
styles.css dosyasını editörünüzde açın.
Eğitimin önceki bölümünde, tarayıcı varsayılanı olan kalın (bold) font ağırlığını normal olarak değiştirmek için iki stil yazmıştınız:
...
h2 {
font-weight: normal;
}
h3 {
font-weight: normal;
}
...
h2 ve h3 tip seçicilerinin aynı özellik ve değeri içerdiği için, bu iki stil seçici grubu ile birleştirilebilir.
Seçici grubu, seçiciler arasına virgül koyarak yapılır.
Bu durumda, h3 seçici bloğunu kaldırabilir, ardından h2 seçici bloğunun sonuna virgül ekleyip h3 seçicisini ekleyebilirsiniz.
Okunabilirliği artırmak için her seçiciyi yeni bir satıra koymak faydalı olabilir.
h2,
h3 {
font-weight: normal;
}
Tarayıcınızı açın ve index.html sayfasını yenileyin.
Sayfanın stilinde herhangi bir değişiklik olmamış olmalı, çünkü h2 ve h3 başlıkları artık aynı stilleri paylaşıyor ve bu, seçici bloğu sayesinde sağlandı.
Ancak, stilleri her iki başlık için aynı tutmak zorunda değilsiniz.
Her bir öğe için bireysel h2 ve h3 tip seçicilerini kullanarak her birine özgü stiller uygulayabilirsiniz.
h2,
h3 {
font-weight: normal;
}
h2 {
color: darkblue;
}
h3 {
color: brown;
}
Tarayıcınızda index.html sayfasını yenileyin ve h2 ile h3 başlıklarının hala aynı normal font ağırlığına sahip olduğunu ancak renk özelliklerinin farklı olduğunu göreceksiniz.
Seçici grupları sadece belirli bir türdeki seçicilerle sınırlı değildir ve farklı türdeki seçicileri birleştirerek aynı stil uygulayabilirsiniz.
Bu özelliği, istediğiniz kadar farklı şekilde kullanabilirsiniz.
Şimdi, daha önce tartıştığımız seçicilere bir combinator seçici ekleyelim ve h2 ve h3 seçici grubuna dahil edelim.
...
h2,
h3,
ol strong {
font-weight: normal;
}
...
Tarayıcınızda index.html sayfasını yenilediğinizde, sıralı listedeki (<ol>) <strong> öğesinin artık kalın olmadığını ve normal font ağırlığına sahip olduğunu göreceksiniz.
Bu, combinator seçicisinin doğru şekilde çalıştığını ve <strong> öğelerinin stillerinin font-weight: normal; olarak değiştirildiğini gösteriyor.
Tarayıcıda bu değişiklikleri gözlemleyebilirsiniz.
Başka bir deyişle, sıralı listede bulunan <strong> öğeleri artık kalın olmayacak ve normal ağırlıkta görünecek.
Not: Seçici grubu kullanarak, farklı stilleri tek bir seçici bloğunda birleştirebilirsiniz. Ancak, DRY (Don’t Repeat Yourself) CSS ile insanlar tarafından okunabilir CSS arasında bir denge kurmak önemlidir. En iyi uygulama, genellikle okunabilirliği ön planda tutan bir yaklaşımı benimsemektir.
Aşırı bir örnek vermek gerekirse, tüm stil özelliklerini tek bir grup seçiciyle yazmak mümkün olsa da, bu, geliştiricilerin anlaması için zorlayıcı olabilir.
Bu durumda, geliştirici okunabilirliği tercih edilmelidir.
Geliştiricilerin kolayca anlayabileceği, düzenli ve anlaşılır CSS yazmak, projelerde sürdürülebilirliği ve bakım kolaylığını artırır.
Bu bölümde, seçici grubu ile çalışarak tekrarlanan CSS özelliklerini tek bir seçici bloğunda birleştirdiniz.
Ayrıca, combinator seçicisini seçici grubu ile birlikte kullanarak, yüksek özgüllüğe sahip ve yeniden kullanılabilir özellikler yazdınız.
Bu yöntem, CSS'inizi daha verimli hale getirmek ve daha organize bir şekilde yazmak için oldukça faydalıdır.
Seçici grubu ve combinator seçicisini kullanarak, sayfa stilinizi daha esnek ve sürdürülebilir bir hale getirdiniz.
Sonuç
Bu eğitimde, CSS yazmak için gereken temel seçiciler hakkında bilgi edindiniz.
Artık, HTML içinde derinlemesine yerleşmiş bir öğeyi CSS ile etkili bir şekilde bulabilir ve ona özgül stiller uygulayabilirsiniz.
Ayrıca, daha kısa ve yönetilebilir CSS yazmak için faydalı olan DRY (Don’t Repeat Yourself) programlama prensibini öğrendiniz.
Bu seçiciler, istediğiniz öğeyi ve durumu hedefleyip stil uygulamak için birçok diğer CSS seçicisiyle birleştirilebilir.
Bu yöntemleri kullanarak, CSS'inizi daha verimli ve sürdürülebilir bir şekilde yazabilirsiniz.