CSS Nedir ?

CSS, Cascading Style Sheets deyiminin kısaltmasıdır. Türkçe karşılığı ise; "Basamaklı Stil Sayfaları/Şablonları" şeklindedir.

Nedir Bu CSS ?

Tarayıcı tarafında görüntülediğimiz web sayfalarının Html ve Javascript gibi temel ögelerinden biridir CSS. Sayfa düzeninde bulunan elementlerin (paragraf, başlık, resim vs) sayfa üzerindeki konumu, yazı stili, rengi, kalınlığı gibi birçok özelliğinin belirtilmesinde kullanılan parametreleri içeren stil tanımlarıdır.

CSS; daha çok web siteleri ile birlikte Html ile çokça anılıyor olsa da, XML yapısına sahip web belgelerinin düzeninde de kullanılır.

CSS Nasıl Oluşturulur ?

1. Seçiciler (Selector)

Seçiciler, sayfa içerisinde hangi element için tanımlama yaptığımızı belirler. Örneğin paragraflar için <p> etiketini kullandığımız için; p, başlıklar için yapmak istediğimiz tanımlamaları <h1> etiketini dahil etmek istiyorsak h1, <h2> etiketi için uygulamak istiyorsak h2 gibi etiketin ismini kullanırız.

2. Özellikler ve Değerler

Sayfayı oluşturan elementler üzerinde düşündüğümüz biçimi kazandırabilmek için CSS içerisinde parametreler/özellikler ve bunların alabileceği değerler vardır. Bu özellik ve değerleri tanımlamanın da tabi ki kuralları da var.

Örneğin, sitede bulunan ana başlıkların rengini kahverengi ve font boyutunu 25px olarak ayarlayalım. Ayrıca sayfada bulunan resimlerin maximum genişliğini 500px olarak tanımlayıp daha geniş olmasını engelleyelim.

/*Sayfa başlık stili*/
h1{
    color:saddlebrown;
    font-size:25px;
}
img{
    max-width:500px;
}

Evet, bu stil parametrelerini .css uzantılı bir dosya içerisinde tutarız. Aslında Html kodlarımızın arasında da bu stil tanımlarımız dahil edebiliriz. Ancak her sayfada bu tanımların dahil edilmesi html sayfamızın boyutunu büyütmekle kalmayıp uzun ve karışık hale getirebilir. Html çalışmamızın içerisinde dahil ettiğimiz bu css dosyamız tarayıcı tarafından 1 kez okunur ve tarayıcının ön belleğine alındıktan sonra tekrar çağırılmaz.Bu da bize sayfanın açılma hızında performans sağlar.

Çoğu kez birkaç kilobyte olan bu stil tanımları sayfanın yüklenme hızını çok etkilemeyecek olsa bile çalışmamızın düzenine de büyük katkı sağlar. Hatta büyük projelerde bir sayfanın fazla sayıda işlevi olduğunda bu stil dosyaları megabyte düzeyine de gelebilmektedir.

CSS stil dosyaları yalnızca sayfamızın içeriğinde bulunan elementlere değil sayfanın genel yapısına da hükmedebilir. Örneğin bir web sayfamızın tarayıcı üzerinden görüntülenmesi için bir takım tanımlar kullanılırken, aynı sayfanın yazıcı ile yazdırılmak istendiğinde farklı bir görünüm elde etmesini sağlayabiliriz. Başka bir örnekle masaüstü bilgisayar üzerindeki web tarayıcısının ölçülerinde görünen tasarımın tablet yada telefon üzerinde daha farklı görünmesini sağlayabiliriz. Bu da sayfamıza her kullanıcı için kullanışlı bir görünüm ile birlikte daha faydalı bir çalışma sağlar.