-SENİDUNYAN- Webmaster Sitesi

Y4

CSS Nedir? İngilizce açılımı Cascading Style Sheets, yani Türkçe Çağlayan Stil Tabakası gibi bir anlama geliyor. Peki CSS ile neler yapabiliyoruz? Bize faydaları neler? Ve CSS'yi sayfa içinde ne şekillerde kullanabiliriz? Bu yazımızda bunlardan bahsedeceğim.

CSS ile Neler Yapılıyor?
CSS kullanarak HTML ile yapamayacağımız birçok şeyi yapabiliriz. Bir sayfadaki tüm ögeleri veya belli bir kısım ögeyi renk, boyut, arkaplan resmi, sayfadaki konumu, sağından solundan olan boşlukları ve daha birçok özelliği yönünden CSS ile tanımlayabiliriz. Bir CSS dosyasıyla bütün sayfalarınızın stilini oluşturabileceğiniz için sayfalarınızın boyutu küçülür, yükü hafifler. CSS ayrıca öğrenmesi en kolay dillerden birisidir.

CSS Öğrenmek için Gerekli Ön Bilgiler;
CSS öğrenmek için gereken en önemli bilgi Temel HTML bilgisidir. HTML bilmeden CSS kodlarını kullanmanız çok zor olacaktır. Bu dökümanda anlatacağım konu CSS olduğu için HTML bildiğinizi varsayıyorum. HTML öğrenmeden CSS'ye başlamamanızı tavsiye ederim.
CSS öğrenmek için diğer gerekli bilgi ise İngilizce'dir. Tabi ki ingilizceyi su gibi bilmek değil bu sadece CSS kodları içinde geçen kelimeler İngilizce'dir ve bu kelimelerin büyük bir çoğunluğunun ifade ettiği şey Türkçe karşılığı olan kelimeyle alakalıdır. Yine de ezberiniz iyiyse İngilizce bilmeniz de şart değil

Bir CSS Kuralı Hangi Parçalardan Oluşur?
CSS kuralları 3 parçadan oluşur. Her CSS kuralı bir seçici ve bir tanımlama bölümüne sahiptir. Tanımlama bölümü bir özellik ve bir değerden meydana gelir. Yani bir CSS kuralı şu şekilde oluşturulur;
seçici {özellik:değer}
Bir CSS kuralında seçici olarak bir html ögesinin ismi(Örneğin; a, p, span, div, body), kimliği(id'si) veya sınıfı(class'ı) kullanılabilir. Bu anlatımdaki örneklerde seçici olarak HTML ögelerinin isimleri kullanılmıştır.
CSS kurallarında özellik olarak ise sadece belirli maddeleri kullanabiliyoruz.(Belirli dediğim yaklaşık 120 tane kadar) değer olarak ise her özelliğin alabileceği kendi değerleri var, bunları kullanabiliyoruz.
Örnek olarak a{font-size:12pt} ve span{font-size:10px; font-color:blue;} verilebilir.
Tanımlama bölümünde birden fazla özellik giriliyorsa aralarına noktalı virgül(;) konulur. Sadece tek değer giriliyorsa konulmayabilir ancak değerin sonuna eklemenin de bir sakıncası yoktur. Ayrıca aynı değerleri vereceğimiz iki seçiciyi aralarına virgül koyarak tek seferde tanımlayabiliriz de;
a, span, p {font-size:12pt; font-color:blue;} gibi...