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

[code language=”css”]
.header{
/*özellik yada özellikler burada yazılır*/
}
[/code]

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

[code language=”html”]<h1 class="header">içerik</h1>[/code]

şeklinde yapılır.

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

[code language=”css”]
#header{
/*özellik yada özellikler burada yazılır*/
}
[/code]

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

[code language=”html”]<h1 id="header">içerik</h1>[/code]

şeklinde yapılır.

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

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

birincisi doğrudan etiket üzerine

[code language=”css”] style="" [/code]

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

[code language=”css”]
<style type="text/css"></style>
[/code]

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. )

[code language=”css”]<link rel="stylesheet" href="style.css" />[/code]

css kodlarından örnekler

[code language=”css”]

#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;
}
[/code]