HTML sayfasında üç farklı yolla CSS (Cascading Style Sheet) kullanılabilmektedir :
CSS'de yorum için /* ve */ işareti kullanılmaktadır. /* ve */ arasında yazılan bölüm yorum kabul edilir ve dikkate alınmaz :
a{
color:Red;/*burası yorumdur*/
font-size:10pt;
}
CSS'te basit bir rule aşağıdaki gibidir :
selector {
property : value 1 value 2;
property2 : value 1 value 2 value 3;
}
Yukarıda görüldüğü gibi { işaretinden önceki bölüme selector adı verilmektedir. selector hangi elementlere, { içindeki biçimlerin uygulanp uygulanmayacağını belirtmektedir. property:value şeklinde olan her satıra declaration (deklarayon) adı verilmektedir. Property ve bir property için alınabilecek değerler (value) belirlenmiştir. Basit bir örnek :
p {
font-size : 10 pt;
}
Burada p selector , font-size property(özellik) 'tir. 10 pt ise değerdir.
HTML'de hiyerarşi yapısı biçimlerin uygulanmasında da önemlidir. Örneği A elementi B elementi hiyerarşisi aşağıdaki gibi olsun :
<A>
<B>....</B>
</A>
A elementi için verilen ve inheritance özelliği olan biçimler B içinde geçerli olacaklardır. Aynı biçim hem A hem B için verilmiş ise B içindeki bölüm için B'ye tanımlanmış biçim geçerli olacaktır. Örneğin A için renk kırımızı , B için mavi seçilmiş ise B içerisinde renkler mavi olacak , B dışında ve A içindeki diğer yerlerde kırmızı olacaktır.
Önceliği etkileyen üç kavram, User-Agent (Tarayıcı) , User (Kullanıcı) ve Author (Geliştirici veya Yazar) kavramlarıdır. Biçimler important (önemli) ve normal olarak iki şekilde tanımlanabilmektedir. Biçimin önemli olup olmaması ve biçimi kimin veya neyin tanımladığına göre öncelik sırası düşük öncelikten yüksek önceliğe aşağıdaki gibi olmaktadır :
Yukarıda tanımlanan sıralardan aynı öncelik sırasında olanlar aşağıdaki kurallara göre düşükten yüksek önceliğe aşağıdaki gibi sıralanırlar :
Aşağıda Style etiketi ile kullanım örneği görülmektedir :
<html> <head> <style> ...stiller buraya yazılır.... </style> </head> <body> ...stiller kullanılır.... </body> </html>
Yukarıda görüldüğü gibi stil tanımlamaları head etiketi içerisinde style etiketi içerisine tanımlanır. Style etiketi sadece head etiketi içerisinde olması gerekmemektedir ve başka bölgelerde de olabilir.
Aşağıda bir p elementi biçimlendirme örneği gözülmektedir :
<html> <body> <p style="color:red;font-size:12pt"> inline stil kullanılmış paragraf</p> </body> </html>
görüldüğü gibi style özelliği ile p elementinin biçimleri verilmiştir. Yazının rengi kırmızı ve font boyu 12 punto olacaktır.
Aşağıda ayrı bir CSS dosyasının nasıl kullanılacağını gösteren örnek görülmektedir :
<html> <head> <link href="test.css" type="text/css" rel="stylesheet"></link> </head> <body> ...test.css dosyasındaki stiller kullanılır.... </body> </html>
Head etiketi içerinde link etiketi ile test.css dosyası HTML sayfasına eklenmiştir. test.css dosyasındaki tüm stiller sayfada kullanılabilir.
Aşağıda CSS için bir yorum örneği görülmektedir :
a{
color:Red; /*burası yorumdur*/
font-size:10pt;
}
Görüldüğü gibi /* ve */ işareti ile yorum yapılmıştır.
Aşağıda H3 ile olan tüm başlıkları kırmızı gösteren örnek görülmektedir :
<html> <head> <style> h3{ color:red; } </style> </head> <body> <h3>Bu başlık kırmızı olur</h3> <h4>Bu başlık kırmızı olmaz</h4> </body> </html>
head etiketi içerisinde style etiketi içinde H3 elementinin rengi kırmızı yapılıyor. Sayfa boyunca kullanılan tüm H3 elementlerinin rengi kırmızı olacaktır.
Aşağıda CSS'de inheritance özelliğini gösteren örnek görülmektedir :
<html> <head> <style> body{ color:red; } h3{ color:blue; } </style> </head> <body> <h3>bu başlık mavi olur</h3> <p>bu yazı kırmızı olur</p> </body> </html>
h3 elementinin rengi mavi olur. p elementi içindeki yazı ise özel bir şekilde belirtilmediği için body'nin rengini alır ve kırmızı olur.
Aşağıdaki örnekte font özelliklerini biçimlendiren örnek görülmektedir :
<html> <head> <style> h1,h2,h3{ font-weight:bold; } p{ font-family:Times; font-size:10pt; } .warning{ font-style:italic; font-size:8pt; font-family:Arial; } </style> </head> <body> <h1>Css Kitabı</h1> <p>bu kitap çok önelidir. İşe yarar. Kulnanması kolaydır</p> <p class="warning"> dikkat dikkat bu bir uyarıdır</p> </body> </html>
Başlık (h1,h2,h3) biçimlerinin hepsi bold yapılmıştır. p paragraflarının hepsi Times fontu ve 10 pt olacaktır. .warning adıyla bir class yaratılmıştır ve özellik olarak italic, 8 pt, Arial yapılmıştır. Son paragrafın class özelliği warning verilmiştir.