CSS Seçiciler – İd ve Class

0 219

CSS Seçiciler; Bir HTML koduna renk, şekil ve düzen vermek için CSS kullanmamız şarttı. Peki HTML kullanırken aynı etiketi birden fazla yerde kullanmaktayız bu etiekte verilen renk hepsinde mi geçerli olacak? peki birine sarı diğerine lacivert rengi vermek istersek o nasıl olacak? işte bu soruların cevabı CSS Seçiciler gelin bu makalemizde beraber bakalım…

CSS Seçiciler

CSS Seçiciler; Aynı etiketi birden fazla yerde kullanmaktayız bu durum yeni başlayanların aklına birden fazla soru işareti bırakmakta ama tabi bu makaleden sonra tür sorularınıza cevap bulacaksınız. Aynı etikete farklı CSS vermek için iki yol kullanabiliriz bunlardan ilki İd vererek diğeri ise Class vererek genellikle ikincisini tercih ederiz gelin her ikisini de beraber detaylıca inceleyelim.

1. CSS Tekil Seçici – Id Selector

Daha önce HTML/XHTML etiketlerine stil verme konusunda bilgi edinmişsinizdir. Örneğin “div” etiketine stil verdiğimizde tüm “div” etiketlerinde bu stilin çalıştığını biliyoruz. Eğer biz sadece bir “div” etiketinde verdiğimiz stil gözüksün istiyorsak “Id” seçicisini kullanabiliriz. “Id” seçicisi, bir kez kullanılır. Örneğin sadece tek bir “Div”e stil vereceksek ve bu stili başka hiçbir yerde kullanmayacaksak “div” etiketi içerisine id=”…” yazacağız. “…” olarak belirttiğimiz yere istediğimiz isimi yazabiliriz, kodumuzu daha sonra bu isim ile CSS kodunda çağıracağız. (İsim, rakamla başlamamalı ve Türkçe karakter içermemelidir).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Legal Yazılım</title>
</head>
<body>
    <div id="legalyazilim">Legal Yazılım</div>
</body>
</html>

İd verilen bir etikete CSS verebilmek için o İd içerisine CSS verilir. Bu etiketi belirtmek içinse # işareti ile verilen ad belirtilir ve CSS kodları yazılır.

#legalyazilim {
    color: blue;
}

2. CSS Çoğul Seçici – Class Selector

“Class” seçicisi birden çok kez kullanılabilir. Örneğin, yazı rengi kırmızı olsun istediğimiz bütün etiketlere sayısız kere “Class” seçicisi verebiliriz. “Id” seçicisinde “div” etiketi içine id=”…” şeklinde yazıyorduk, “Class” seçicisinde ise “id” yerine “class” yazacağız. Örneğin: class=”…” bu verdiğimiz class ismini başka nerede kullanırsak kullanalım aynı CSS uygulanır.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Legal Yazılım</title>
</head>
<body>
    <div class="legalyazilim">Legal Yazılım</div>
</body>
</html>

İd üzerinden CSS yazarken # işareti ile çağırıyorduk Class ta ise # işareti yerine “.” kullanılır. Nokta ile birlikte Class belirlenir ve CSS kodları o Class içerisinde yazılır.

.legalyazilim {
    color: blue;
}

Cevap bırakın

E-posta hesabınız yayımlanmayacak.