CSS'in Yapısı ve Seçiciler

CSS'in yapısına öncelikle aşağıdaki görselden birlikte bakalım.

Burada görüldüğü üzere altı mavi renkle çizilmiş kısım bizim seçicilerimizi temsil ediyor yani HTML'deki etiketlerimizi. Daha sonra o etiketi seçip üzerinde stil uygulamak üzere { ve } bloklarını açıyoruz. Ve içerisine özellik: değer ekleyerek stil işlemini gerçekleştiriyoruz. Örneğin bu örnekte h1 etiketlerini seçtik ve font boyutunu 12px, renginide kırmızı olarak ayarladık.

<h1>Başlık</h1>
    
<style>
h1 {
    color: red;
    font-size: 12px
}
</style>

Editörde Görüntüle

Burada dikkat edilmesi gereken her özellik: değer bloğu sonrasında ; ile ayrılması gerekiyor. Sonuncu blokta ya da tek blok ise koymak zorunda değilsiniz.

Eğer <style> etiketi size yabancı ise korkmayın, bir sonraki bölümde bu etiketin amacını öğreneceğiz.

CSS'de Seçiciler

CSS'de seçiciler bir html sayfasında HTML etiketlerini id, class, nitelik, ismi vb. şekillerine göre seçerek stil uygulamamızı sağlar.

CSS'de Etiket Seçici

Bu seçici doğrudan etiketin adını yazarak kullanılır. Hangi etiketi seçip stil vermek istiyorsanız etiketin adını yazıyorsunuz. Örneğin;

p {
    font-size: 15px;
}

Paragraf etiketini seçtik ve stil uyguladık.

CSS'de id Seçicisi

HTML etiketlerinde id niteli olan etiketleri seçmek için kullanılır. Hatırlarsanız HTML derslerinde bahsetmiştik, id ile tanımlanan etiketler sayfa boyunca sadece bir kere tanımlanabilir diye. İşte bu etiketleri id seçicisi ile seçiyoruz.

Öncelikle örnek bir etiket görelim;

<h1 id="baslik"> Başlık </h1>

Editörde Görüntüle

Artık id niteliği baslik değerine sahip bir etiketim var. CSS'de id seçicisini kullanırken, id değerinin başına # işareti konur. Yani şu şekilde seçilerek stil uygulanır;

#baslik {
    color: green;
}

Ek olarak # işaretinden önce spesifik olarak etikette belirtilebilir. Normal şartlarda buna gerek yoktur çünkü id niteliği etiket gözetmez. Yani a etiketine id verip p etiketine aynı id'yi veremeyiz. Ancak yinede nasıl olacağını kısaca göstermek gerekirse;

h1#baslik {
    color: green;
}

UNUTMADAN

id değerleri hiçbir zaman sayı ile başlayamaz. ayrıca alt tire (_) ve tire (-) karakterleri hariç hiçbir özel karakteri içeremez. Ayrıca id değeri büyük-küçük harfe duyarlıdır. Yani #Test ile #test aynı değildir.

CSS'de class Seçicisi

HTML etiketlerinde class niteli olan etiketleri seçmek için kullanılır. class niteliğine sahip örnek bir etiket vermek gerekirse;

<p class="text-center"> .. </p>
        
<div class="text-center"> .. </div>

Editörde Görüntüle

Burada amaç aynı ortak class niteliklerine sahip elemanları topluca seçerek stil uygulamakta. Örneğin p ve div etiketlerinde sınıfları text-center değerine eşit. Buradaki ortak amaç yazılarını ortalamak için stil vermek. class niteliğine sahip etiketleri seçerken nitelik değerinin başına . nokta işareti konur. Yani şu şekilde seçilir;

.text-center {
    text-align: center;
}

Bu şekilde text-center değerine sahip tüm etiketleri seçip stil uygulayacaktır. id seçicisindeki gibi, nokta işaretinin öncesine spesifik olarak etiket ismi belirleyebilirim. Örneğin bunu sadece p etiketlerinde class niteliği text-center olanlara uyarlamak istersek;

p.text-center {
    text-align: center;
}

UNUTMADAN

class değerleri hiçbir zaman sayı ile başlayamaz. ayrıca alt tire (_) ve tire (-) karakterleri hariç hiçbir özel karakteri içeremez. Ayrıca class niteliği büyük-küçük harfe duyarlıdır. Yani .Test ile .test aynı değildir.

CSS'de Grup Olarak Seçmek

Aynı stil değerlerine sahip etiketleri seçerken gruplama yapabiliriz. Örneğin;

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

h3 {
    text-align: center;
    color: red;
}

Burada 3 etikette aynı stile sahip. O zaman virgül ile ayırarak tek satırda yazabiliriz.

h1, h2, h3 {
    text-align: center;
    color: red;
}

Sadece etiketleri değil id ve class şeklinde kullanımlarıda yapabilirsiniz.

UNUTMADAN

Şu an temel olarak sıkça kullandığımız seçicileri gördük, ilerleyen bölümlerde daha fazla koşula göre etiketleri seçme işlemlerine gözatacağız.

CSS'de Yorum Satırları

Yazdığınız kodları daha sonra değiştirmek istediğinizde neyi neden yazdığınızı unutabilirsiniz. Bu gibi durumlarda yorum satırlarını kullanarak, kendinize notlar alabilirsiniz. Tarayıcılar bunu dikkate almazlar, ancak stil dosyası görüntülenirse kaynakta gözükür bilginiz olsun. O yüzden önemli notlar düşmeyin :)

p {
    color: red;
    /* background-color: green; */
}

Yukarıdaki örnekte p'nin bir özelliğini yorum satırına aldım, artık sadece yazı rengi kırmızı olacak, arkaplan rengi görünmeyecek. Çünkü tarayıcılar yorumları yorumlamazlar.

/* tüm değerleri sıfırla */
* {
    padding: 0;
    margin: 0;
}

Unutmadan, çok satırlı yorumlarıda yapabilirsiniz. Sadece tek satır yazmak zorunda değilsiniz.