“Cascading Style Sheets” kısaltmalarından oluşur ve Türkçe karşılığı “Basamaklı Stil Şablonlarıdır”. CSS’ler HTML etiketlerimizi görsel olarak biçimlendirmemizi sağlar (renk, yazı, arka plan rengi, genişlik, yükseklik vb.). Bu sayede oluşturmuş olduğumuz web sitelerini görsel olarak daha fazla zenginleştirebiliriz. Üç çeşit CSS türü vardır. Bunlar;
- Yerel CSS
- Genel CSS
- Harici (Dış) CSS
Olarak adlandırılır. Bu üç tür stil şablonları, HTML kodları arasına farklı şekillerde dâhil edilir.
- Yerel CSS
Yerel CSS’ler HTML etiketleri arasına style parametresi olarak yazılır ve sadece yazıldığı etiketi etkiler. Bir örnek verecek olursak;
<p style=“color: red;”>Bu bir örnek metindir.</p>
<p>Bu da farklı bir örnek metindir.</p>
Yukarıdaki örnekte olduğu gibi “p” etiketi içerisine uygulanan style parametresi ile sadece uyguladığımız etiketin içerisindeki metin kırmızı yazılacaktır. Diğer “p” etiketi içerisindeki metin ise bundan etkilenmeyecektir.
- Genel CSS
Genel CSS’ler HTML belgesinde “head” etiketleri arasına “style” etiketleri açılarak yazılır. Yerel CSS”in aksine sadece uygulandığı etiketi değil tüm belgeyi etkiler. Style etiketi içerisinde, etiketin adi yazılıp { } içerisinde değer verilir. Örneğin;
<html>
<head>
<style>
h1 {
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
<h1>Bu bir başlıktır</h1>
</body>
</html>
Yukarıdaki örnekte de belliği olacağı üzere iki adet başlık etiketimiz bulunmakta. Yazmış olduğumuz Genel CSS ile iki başlığımızın da rengi kırmızı ve yazı boyutu 15px olacaktır.
- Harici (Dış) CSS
Harici CSS’ler, dışarıda “.css” uzantılı belge olarak oluşturulur. Bu sayede HTML sayfası tarayıcıda yüklenirken sayfanın ağır çalışmasını engellemiş oluruz. Harici CSS’ler sayfaya “head” etiketleri içerisinde “link” etiketleri oluşturularak dâhil edilir. Nasıl eklendiğini bir örnekle gösterirsek;
<html>
<head>
<link rel=“stylesheet” href= “cssadi.css”/>
</head>
<body>
</body>
</html>
Yukarıdaki gibi CSS’i sayfaya dâhil ettikten sonra etiketlerinizi, farklı bir belgede oluşturduğunuz CSS ile düzenleyebilirsiniz. Hem fazla kod yükünden kurtulmuş oluruz hem de tarayıcıların web sayfasını yavaş yüklemesini engellemiş oluruz. Bu ders ile CSS’in ne olduğunu ve CSS çeşitlerini öğrenmiş olduk. Bir dahaki derste CSS yazarken kullandığımız seçicilerden bahsedeceğiz.
Bizi takip etmeye devam edin.
