CSS ile HTML elemanlarının görünümü ayarlanabilir. CSS'yi kullanabilmek için öncelikle HTML bilinmelidir.
CSS'de HTML elemanlarının görünümünü ayarlayan herbir elemana kural adı verilir. Bir CSS kuralı aşağıdaki formatta tanımlanır:
Seçici{Özellik1:Değer1;Özellik2:Değer2;...;}
Burada seçici olarak adlandırılan kısım kuralın hangi HTML elemanları için geçerli olacağını belirtir. Bir örnek verilecek olursa bu kısma p yazılabilir. Bu, kuralın dokümanın içerisindeki tüm paragraflar için geçerli olacağını belirtir.
Özellik olarak adlandırılan kısım ise HTML elemanında neyin ayarlanacağını belirtir. Örnek olarak buraya yazı rengini belirleyen color özelliği yazılabilir.
Değer kısmına da özelliğin alabileceği bir değer girilmelidir. Verdiğimiz örnek için bir renk değeri girilmelidir. Bu da kırmızı renge karşılık gelen red olabilir.
Yani sonuç olarak bir CSS kuralı şöyle tanımlanmış oldu:
p{color:red;}
Görsel olarak daha kolay okunduğundan kurallar genelde aşağıdaki şekilde yazılır:
p{
color:red;
}
Bu örneğin nasıl çalıştığını görmeden önce CSS kodunun nasıl ve nereye yazılacağını açıklamak faydalı olacaktır.
Öncelikle şu bilinmelidir ki CSS kodları içerisinde HTML elemanı içermemelidir. CSS kodlarında sadece CSS kuralları ve yorumlar olabilir. Yorumlar aşağıdaki formatta yazılır:
/* Yorum */
Yorumlar tarayıcılarca yok sayılırlar ve sadece kod okunurken anlaşılır olması için kullanılırlar.
CSS kodları üç farklı yere yazılabilir. Bunlardan birisi CSS özelliklerini style niteliği karşısına yazmaktır. Bu durumda belirtilen kurallar sadece niteliği içeren eleman için geçerli olacaktır. Bu nedenle style niteliği karşısına yazılan kurallarda seçici ve tırnaklı parantezler kullanılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS style niteliği</title>
</head>
<body>
<p style="color:red;">Biçimlendirilmiş paragraf</p>
<p>Biçimlendirilmemiş paragraf</p>
</body>
</html>
Yukarıdaki örnek kod satece style niteliğinin kullandığı paragrafı biçimlendirecektir. Alttaki paragraftaki yazılar yine siyah olarak kalacaktır.
CSS kurallarını yazmanın bir yolu da bunları style etiketleri arasına yazmaktır. Böyle yapılarak bir sayfadaki tüm elemanlar hakkında kurallar yazılabilir.
<!DOCTYPE html>
<html>
<head>
<title>CSS style etiketi</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>Örnek Paragraf 1</p>
<p>Örnek Paragraf 2</p>
</body>
</html>
CSS kurallarını yazmanın bir başka yolu da bu kuralları bir CSS dosyasına yazmak ve HTML sayfasını link elemanı ile bu dosyayla ilişkilendirmektir. Bu yöntem özellikle birden fazla sayfa aynı şekilde biçimlendirilecekse kullanışlıdır. CSS dosyası da Notepad ile oluşturulabilir, kaydedilirken .css uzantısı ile kaydedilmelidir.
Yukarıdaki örnek CSS dosyası kullanılarak şu şekilde yapılabilir. HTML dosyası şu kodla oluşturulmalıdır. CSS dosyası link elemanı ile HTML dosyasına bağlanmıştır.
<!DOCTYPE html>
<html>
<head>
<title>CSS dosyası</title>
<link rel="stylesheet" type="text/css" href="ornek.css">
</head>
<body>
<p>Örnek Paragraf 1</p>
<p>Örnek Paragraf 2</p>
</body>
</html>
CSS dosyası da aşağıdaki kodla oluşturulmalı ve "ornek.css" ismiyle kaydedilmelidir.
p{
color:red;
}
Eğer aynı eleman için birden fazla şekilde biçimlendirme yapılırsa öncelik style niteliği ile yapılan biçimlendirmedir. style etiketi ile yapılan biçimlendirme ile CSS dosyası ile yapılan biçimlendirme arasındaki öncelik ise daha sonra yazılmış olandadır.
Burada verilen örnekler fazladan bir dosya daha oluşturma gereksinimi oluşturmamak adına style etiketleri arasında verilecektir. İstenirse bu etiketler arasındaki kodlar ile CSS dosyası oluşturulup HTML dokümanına bağlanabilir.
CSS3 >>>>> Seçiciler