Css seçicilerini, stil vermek istediğimiz HTML elemanlarını seçmek için kullanılırız.



Element Seçme:

p, div, cite, a vb. bir çok elementimizi seçerek stillendirebiliriz.

<!DOCTYPE html>
<html>
<head>
<style>
 p {
    color: red;                  
  } 
  a {
     text-decoration: none;
     color:black;
   }

</style>
</head>
<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>

<a href="#">Link</a>


</body>
</html>

Örnekte sayfada ki bütün <p> elementlerini seçtik ve rengini kırmızı yaptık. <a> elementimizin alt çizgisini kaldırdık ve rengini siyah yaptık.


ID Seçme:

Bir element’in ID’si, bir sayfa içerisinde benzersizdir. ID seçicileri benzersiz element seçmek için kullanabiliriz.

Not: ID’ler bir sayı ile başlamaz.


<!DOCTYPE html>
<html>
<head>
<style>
#p1{
  color: red;
}
</style>
</head>
<body>


<p id="p1">Hello World!</p>
<p>Bu paragraf verdiğimiz stilden etkilenmeyecek.</p>


</body>
</html>

Örnekte ID'si p1 olan elementimizin rengini kırmızı yaptık.


Sınıf Seçme:

Bir sınıfa sahip HTML elementlerini seçmek için kullanabiliriz.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}
</style>
</head>
<body>


<h1 class="center">Ortalanmış h1 başlığı.</h1>
<p class="center">Ortalanmış paragraf.</p> 


</body>
</html>

Örnekte class'ı center olan elementlerimizi yatayda ortaladık.


HTML elementlerine birden fazla class'da verebiliriz.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}
.text-blue {
  color: blue;
}
</style>
</head>
<body>


<h1 class="center text-blue">Ortalanmış, mavi renkli h1 başlığı.</h1>
<p class="center">Ortalanmış paragraf.</p> 


</body>
</html>


Evrensel Seçici

Sayfada ki bütün elementlere verdiğimiz stilleri uygular.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
}
</style>
</head>
<body>


<h1>Evrensel Seçici</h1>


<p id="para1">Bütün elementler saya içerisinde ortalanmıştır.</p>



</body>
</html>


Gruplayarak seçme

Aynı stil tanımlamalarına sahip elemenetleri tek satırda yazarak kod kalabalığından kurtulabiliriz.

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

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

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

Şimdi bu elementlerimizi gruplayalım.

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

Elementleri gruplayıp, kodlarımızın oluşturduğu kalabalığı düzelttik.