Cascading Style Sheets (basamaklı stil sayfaları) kelimelerinin baş harflerinden oluşur. Web sayfalarının tasarımsal olarak düzenlemeye yarayan bir teknolojidir. Css’e bir dildir denir mi tam emin olamadım, ancak başlı başlına bir hiyerarşiye sahiptir ve geniş bir kapsama sahiptir. İlk kez 1996 yılında ortaya çıkmıştır. Şu an 1999 yılında kullanıma açılan ve 2012 yılında son güncellemeleri yapılan CSS 3 kullanılmaktadır.
Sadece css kullanarak bir web sayfası yapamazsınız, html de bilmeniz gerekir. Zaten css ile yapılan şey, html taglarına stiller atamaktır. Css’in yaygın olan üç farklı kullanım şekli vardır.
Inline Css
Bu kullanım şekli pek önerilmese de ısrarla kullanımakta. Html taglarına ‘style’ özelliği ile stil atanarak yapılır. Bu yöntemde; sayfa içindeki aynı özelliklere sahip taglar için tekrar tekrar style özelliğinin eklenmesi gerekir. Bir değişiklik yapılacağı zaman tüm style özelliklerinin değiştirilmesi gerekmektedir. Bu yöntem seo açısından da sakıncalıdır. Arama motorları sayfalardaki içerik/kod oranı-na bakmaktadır ve bu konullanımda içerik için daha fazla kod yazılmaktadır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <h1 style="color:#00F">Başlık</h1> </body> </html>
Dahili Css
Bu kullanımda; sayfanın herhangi bir yerinde
taglarının arasına css kodlarının yazılması ile kullanılan bir şekildir. Bu kullanım içerik/kod oranı bakımından avantajlıdır. Ancak bu kullanım şeklindeki handikap ise diğer web sayfalarıyla farklılıklara yol açabilecek olmasıdır. Bir değişiğiklik yapıldığında, değişiklik tüm sayfalara aktarılmak zorundadır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
h1 {
color:#00F;
}
</style>
</head>
<body>
<h1>Başlık</h1>
</body>
</html>
Harici Css
En çok önerilen kullanım şeklidir. Harici bir css dosyasında tüm css kodlarınızı saklarsınız ve bu sayfayı web sayfanıza çağırırsınız. Bu kullanım sayesinde merkezi bir dosyadan tasarım stillerinizi yönetebilirsiniz. Bir diğer yararı da, tarayıcılar css dosyasını bir kez indirdikten sonra tekrar indirme ihtiyacı duymamalarıdır. Böylece bant genişliğinden de kar etmiş olursunuz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Başlık</h1> </body> </html>
style.css
@charset "utf-8";
/* CSS Document */
h1 {
color:#00F;
}