Daha önce CSS Nedir? yazımda css kodlarının nasıl yazıldığından bahsetmiştik. Bu yazımda ise css de en çok kullanacağımız iki şey olan class ve id tanımlamalarını, css kodlarının nereye yazıldığını ve birkaç örnek css kodunu anlatacağım.

Class : css'de birden fazla etikete özellik vermek için kullanılır.

css kullanımında class tanımlaması yapmak istersek; . (nokta) ile başlayan bir isim verilir ve isme ait özellikler tanımlanır.

örnek

.header{
/*özellik yada özellikler burada yazılır*/
}

tanımlaması yapılan class' ın bir etikete atanması ise

<h1 class="header">içerik</h1>

şeklinde yapılır.

Id : css'de sadece bir etikete özellik vermek için kullanılır.

id tanımlaması yapmak istersek; # (diyez) ile başlayan bir isim verilir ve isme ait özellikler tanımlanır.

örnek

#header{
/*özellik yada özellikler burada yazılır*/
}

tanımlaması yapılan id' nin bir etikete atanması ise

<h1 id="header">içerik</h1>

şeklinde yapılır.

Not : tanımlanan id bir sayfada sadece bir elemente atanmalıdır.

Peki class ile id arasındaki fark ne, hangisini ne zaman kullanacağız? Şimdi bir senaryo düşünelim. Sayfanızda 10 tane ürün kutusu var ve hepsinin aynı görünmesini istiyorsunuz. Burada class kullanırsınız, .urun diye bir class yazıp 10 kutunun hepsine class="urun" verirsiniz. Ama sayfanın üst kısmı (header) sayfada sadece bir tane olur. İşte bunun gibi tek olan şeyler için de id kullanırsınız.

Bir etikete aynı anda hem class hem id verebilirsiniz. Birden fazla class vermek isterseniz de aralarına boşluk koymanız yeterli.

<div id="header" class="kutu golge">içerik</div>

css tanımlaması 3 şekilde yapılır.

birincisi doğrudan etiket üzerine

style=""

kodu içerisinde yazılır. dezavantajları (class yada id isimlendirmesi yapılamaz, yazdığınız özellik sadece o etiketi bağlar)

ikincisi head tagları arasında

<style type="text/css"></style>

kodları arasına yazılır. (ikinci en çok kullanılan yöntemdir. dezavantajı ise genellikle sadece bulunduğu sayfada kullanılabilir.)

üçüncüsü ise boş harici bir sayfada doğrudan css kodları yazılır. head tagları arasında bu css dosyası belgeye dahil edilir. (en çok kullanılan ve en uygun yöntemdir.)

<link rel="stylesheet" href="style.css" />

css kodlarından örnekler

#ornek_etiket {
/* bir elementin kendinin üst dışının bir nesneden uzaklığı */
margin-top:10px;
/* bir elementin kendinin sağ dışının bir nesneden uzaklığı */
margin-right:20px;
/* bir elementin kendinin alt dışının bir nesneden uzaklığı */
margin-bottom:30px;
/* bir elementin kendinin sol dışının bir nesneden uzaklığı */
margin-left:40px;
/*
üstteki kullanımın kısa yazılışı */
margin:10px 20px 30px 40px;

margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
/*
üstteki kullanımın kısa yazılışı */
margin:10px 20px;
}

kodların açıklamasını yapacak olursak,

margin bir etiketin dışarıdaki diğer etiketlerle arasında kalan boşluktur. margin-top, margin-right, margin-bottom ve margin-left ile dört yönü ayrı ayrı verebiliriz. Ama her seferinde dört satır yazmak yerine kısa yazılışını kullanabiliriz. margin:10px 20px 30px 40px yazdığımızda değerler saat yönünde yani üst, sağ, alt, sol sırasıyla uygulanır. Eğer üst ile alt, sağ ile sol aynı ise margin:10px 20px yazmak yeterli. İlk değer üst ve alta, ikinci değer sağ ve sola uygulanır. Tek değer yazarsanız da (margin:10px) dört tarafa aynı boşluk verilir.

margin ile karıştırılan bir özellik daha var, padding. margin etiketin dışındaki boşluk iken padding etiketin içindeki boşluktur, yani içerik ile kenarlık arasındaki mesafe. Kullanımı margin ile aynıdır. css de her etiket aslında bir kutudur ve bu kutu içten dışa doğru içerik, padding, border (kenarlık) ve margin katmanlarından oluşur. Buna box model deniyor. Bir kutunun sayfada kapladığı toplam alanı hesaplarken bu dördünü birlikte düşünmeniz gerekir.

.kutu {
width: 200px;
padding: 10px;           /* içten 10px boşluk */
border: 1px solid #ccc;  /* 1px gri kenarlık */
margin: 20px;            /* dıştan 20px boşluk */
}
/* kutunun genişliği 200 + 10 + 10 + 1 + 1 = 222px olur */