CSS'in çıkışı 17 Aralık 1996’da W3C tarafından yayınlanan CSS1 sürümüdür. HTML'e ek olarak metin ve format biçimlendirme alanında çokca olanaklar sunan bir Web teknolojisidir. İnternet sayfaları için genel geçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir.
Bu tekniğin en önemli özelliği kullanımındaki esnekliktir. Bir web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfalarında ortak olarak kullanılabilir. Böylece sayfaların hafızadaki boyutu epey küçüldüğü gibi güncelleme yapmak da kolaylaşır. CSS kodları, HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da işlem yapılabilir.
<BODY> veya <HEAD> bölümlerinde yer alabilirler. Ayrıca <link rel="stylesheet" type="text/css" href="/style.css" /> koduyla CSS dosyası çalışma sayfasına çağırabilirsiniz. Ayrı css dosyasından çağırmak en mantıklısı olur yüzlerce HTML sayfanız varsa tek bir css dosyasıyla düzenlemenizi kolaylaştırır.
CSS dosyası sayfaya nasıl çağırılır örnekleri:
<head> <link rel="stylesheet" type="text/css" href="/style.css"> </head>
<html>
<head>
<title>Sayfa Başlığılt;/title>
<style>
p { font-size: 13px; background-color:#000; color:#fff; }
</style>
</head>
<body>
<p>Bu 13 piksel yazı boyutunda siyah üzerinde beyaz yazıdır.lt;/p>
</bod>
</html>
Aşağıda CSS kod örneklerini görebilirsiniz:
<style>
p{
font-family: "arial",sans-serif;
font-size: 12px;
font-color: black
}
</style>
<p>Bu bir paragraf cümlesidir.</p>
<style>
div{
width: 600px;
padding: 15px;
margin: 0 auto;
}
</style>
<div>Bu alanı sayfaya ortalama.</div>
<style>
.ortala{
width: 600px;
padding: 15px;
margin: 0 auto;
}
</style>
<div class="ortala">Bu alanı sayfaya ortalama.</div>
<style>
#ortala{
width: 600px;
padding: 15px;
margin: 0 auto;
}
</style>
<div id="ortala">Bu alanı sayfaya ortalama.</div>
<style>
.link{
color: gray;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
</style>
<a class="link">Detay Butonu.</a>
<style>
.cerceve{
border:3px dashed #000;
}
</style>
<img class="cerceve" src="/resim.jpg"> Fotoğrafaraf etrafına siyah kesik kesik çerçeve ekler.
<style>
.cerceve{
border-radius: 50%;
}
</style>
<img class="yuvarla" src="/resim.jpg"> Fotoğrafın köşelerini ovalleştirir.