CSS***8217;de en önemli konulardan birisi ID ve Class kısmıdır. Bunları doğru kullanamazsak, yapacağımız kodlar çalışsa bile mutlaka bir yerlerde hata oluşturur. Ayrıca W3C kurallarına uymakta gerekir değil mi? Şimdi geçelim bu iki kod kullanım şeklini anlatmaya. Kimlik (ID), sadece bir kere olacak ise kullanın. Ama mesela aynı şekilde birden çok yerde kullanacaksanız o div***8217;i, Sınıf (Class) olarak kullanmanız gerekiyor. Örnek: Sitenizi komple kaplayacak bir Kimlik(ID) belirleyelim ve buna wrapper diyelim. Siteniz ise wrapper***8217;in içerisine yerleştireceğiniz kodlardan oluşacak. Yani wrapper kısmı, tek olacak. Bunun için ***8220;<div id=***8221;wrapper***8221;></div>***8221; kullanmanız gerekir. Ama mesela wrapper***8217;in içerisine bir kaç yazı yazacaksanız bunu, ***8220;<div class=***8221;yazi***8221;></div>***8221; olarak göstermeniz gerekir. Hemen bir örnek göstermek gerekirse:
[HIDE]<!DOCTYPE html PUBLIC ***8220;-//W3C//DTD XHTML 1.0 Transitional//EN***8221; ***8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd***8221;>
<html xmlns=***8221;http://www.w3.org/1999/xhtml***8221;>
<head>
<meta http-equiv=***8221;Content-Type***8221; content=***8221;text/html; charset=utf-8***8243; />
<link rel=***8221;stylesheet***8221; type=***8221;text/css***8221; href=***8221;style.css***8221; />
<title>CSS***8217;de kimlik (ID) ve sınıf (class) nedir? Nasıl kullanılır?</title>
</head>
<body>
<div id=***8221;wrapper***8221;>
<div class=***8221;yazi***8221;>Bu bir deneme yazısıdır. Buraya yazılan yazıyı test etmek amaçlıdır.</div>
<div class=***8221;yazi***8221;>Bu bir deneme yazısıdır. Buraya yazılan yazıyı test etmek amaçlıdır.</div>
</div>
</body>
</html>[/HIDE]
ID ve Class***8216;ın HTML kısmını bu şekilde oluşturacağız. Şimdi gelelim oluşturduğumuz bu HTML dosyasına bir stil dosyası oluşturmaya. Dikkat ettiyseniz üstteki kodun içerisinde stil dosyasını çağıran bir kod mevcut. Stil dosyamızı oluştururken ID***8216;leri ***8220;#***8221; ile, Class***8216;ları ise ***8220;.***8221; ile gösteriyoruz. Yazacağımız değeri ise ***8220;{..}***8221; içerisine yazıyoruz. Her kodun sonuna ***8220;:***8221; koyuyoruz ve kodun değerinden sonra ise ***8220;;***8221; ile kapatıyoruz.
[HIDE]body{background:#aaaaaa;font-family:arial;font-size:12px;margin:0 auto 0;width:950px;}
#wrapper{border:2 px solid;padding:10px 10px 0px 10px;}
.yazi{margin:0px 0px 10px 0px}[/HIDE]
Stil dosyamızıza bu şekilde kodladık. İçerisindeki kodların ne işe yaradığını daha sonraki derslerimizde tek tek inceliceğiz. Şimdilik sadece ID ve Class***8216;ın kullanımını anlamanız yeterli. Bir başka CSS dersinde görüşmek üzere.
[HIDE]<!DOCTYPE html PUBLIC ***8220;-//W3C//DTD XHTML 1.0 Transitional//EN***8221; ***8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd***8221;>
<html xmlns=***8221;http://www.w3.org/1999/xhtml***8221;>
<head>
<meta http-equiv=***8221;Content-Type***8221; content=***8221;text/html; charset=utf-8***8243; />
<link rel=***8221;stylesheet***8221; type=***8221;text/css***8221; href=***8221;style.css***8221; />
<title>CSS***8217;de kimlik (ID) ve sınıf (class) nedir? Nasıl kullanılır?</title>
</head>
<body>
<div id=***8221;wrapper***8221;>
<div class=***8221;yazi***8221;>Bu bir deneme yazısıdır. Buraya yazılan yazıyı test etmek amaçlıdır.</div>
<div class=***8221;yazi***8221;>Bu bir deneme yazısıdır. Buraya yazılan yazıyı test etmek amaçlıdır.</div>
</div>
</body>
</html>[/HIDE]
ID ve Class***8216;ın HTML kısmını bu şekilde oluşturacağız. Şimdi gelelim oluşturduğumuz bu HTML dosyasına bir stil dosyası oluşturmaya. Dikkat ettiyseniz üstteki kodun içerisinde stil dosyasını çağıran bir kod mevcut. Stil dosyamızı oluştururken ID***8216;leri ***8220;#***8221; ile, Class***8216;ları ise ***8220;.***8221; ile gösteriyoruz. Yazacağımız değeri ise ***8220;{..}***8221; içerisine yazıyoruz. Her kodun sonuna ***8220;:***8221; koyuyoruz ve kodun değerinden sonra ise ***8220;;***8221; ile kapatıyoruz.
[HIDE]body{background:#aaaaaa;font-family:arial;font-size:12px;margin:0 auto 0;width:950px;}
#wrapper{border:2 px solid;padding:10px 10px 0px 10px;}
.yazi{margin:0px 0px 10px 0px}[/HIDE]
Stil dosyamızıza bu şekilde kodladık. İçerisindeki kodların ne işe yaradığını daha sonraki derslerimizde tek tek inceliceğiz. Şimdilik sadece ID ve Class***8216;ın kullanımını anlamanız yeterli. Bir başka CSS dersinde görüşmek üzere.