HTML Class ve ID
HTML Class ve ID nedir? Ne amaçla kullanılır? Aralarındaki fark nedir? Tüm bu soruların cevabı bu konumuzda.
HTML Class ve ID
Class
Bu nitelik, HTML öğeleri için sınıf belirlemek için kullanılır.
Ayrıca, belirli bir sınıf adına sahip öğelere erişmek ve bunları işlemek için JavaScript tarafından da kullanılabilir.
Aşağıdaki örneğimizde görebileceğiniz gibi, <div> etiketleri içerisinde kullanmış olduğumuz class öğesi ile head bölümünde oluşturmuş olduğumuz style yapısının içerisindeki ".konu" tanımını çağırıyoruz ve bu tanımın içerisindeki yer alan biçim özelliklerini <div> etiketlerimizin içerisindeki tüm öğelere uyguluyoruz.
Not: Örneğimizi oluştururken <div> üzerinden örneklendirdik fakat, <span> öğesi için de aynı şekilde örneklendirme yapabiliriz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
.konu{
background-color: red;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="konu">
<h2>HTML</h2>
<p>HTML hakkındaki her şey! - HTML </p>
</div>
<div class="konu">
<h2>CSS</h2>
<p>CSS hakkındaki her şey! - HTML </p>
</div>
</body>
</html>Örnek Çıktısı:
Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
ID
Bu nitelik, bir HTML öğesine benzersiz bir kimlik atamak için kullanılır.
Ayrıca, belirli bir kimliğe sahip öğeye erişmek ve bunu işlemek için JavaScript tarafından da kullanılabilir.
Aşağıdaki örneğimizi incelediğimizde, <h1> etiketimize bir kimlik yani id tanımlaması yaptık ve bu id ile head bölümündeki style yapısının içerisindeki "#baslik" tanımını çağırdık ve bu tanımın sahip olduğu biçim özellilerini etiketimizde kullanmış olduk.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
#baslik {
background-color: red;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="baslik">Onur KUL | Kişisel Blog</h1>
</body>
</html>Örnek Çıktısı:
Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
Class ve ID Arasındaki Fark
Bir class niteliği birden çok HTML öğesi tarafından kullanılabilirken, bir id niteliği sayfadaki yalnızca bir HTML öğesi tarafından kullanılır.
Örnek:
<style>
/* Id */
#onur {
background-color: red;
color: black;
padding: 40px;
text-align: center;
}
/* Class" */
.konu{
background-color: red;
color: white;
padding: 10px;
}
</style>
<!-- Id -->
<h1 id="baslik">Onur KUL | Kişisel Blog</h1>
<!-- Class -->
<h2 class="konu">HTML</h2>
<p>HTML hakkındaki her şey!</p>
<h2 class="konu">CSS</h2>
<p>CSS hakkındaki her şey!.</p>
Örnek Çıktısı:
Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
Tepkiniz Nedir?
