CSS nedir Nasıl kullanılır !

CSS nedir?

Css : açılımıyla Cascading Style Sheets yani Türkçe anlamı ile Basamaklı Stil Şablonu demektir. Eğer yazıya başlamadan önce ki araştırmamda düzgün bir çeviri yapabildiysem css hayatımıza HTML 4.0 ile dahil olmuştur. Görevi HTML etiketleri kullanılarak oluşturulmuş web site görüntülerini şekillendirmektir.  HTML demişken hatırlatmak isterim CSS’i kullanabilmek için HTML bilmemiz gerekiyor zaten css den öncebilmemiz gereken tek kodlama html kodlamasıdır.

CSS ne işe yarar, neler yapılabilir?

Yukarıda ki Css nedir? başlıklı paragrafımda da bahsettiğim gibi css, web sitelerinin kullanıcılar tarafından ekranda görünen arayüzünü şekillendirmemize, renklendirmemize, boyutlandırmamıza ve konumlandırmamıza yarar.  Aslında bunun için bir listeye gerek yok çünkü css ile hemen hemen bütün görüntü şekillendirmesini yapabiliriz fakat gene de bir örnek listesi vermem gerekir ise css ile;

• Arkaplanlar renklendirebilir veya resim ekleyebilir.
• Nesnelere kenarlıklar eklenebilir.
• Kenarlıklar renklendirilebilir.
• Yazılar boyutlandırılıp, farklı renklere boyanabilir.
• Yatay menüler yapılabilir.
• Css ile dikey menülerde yapılabilir.
• Hatta css ile açılır menü bile yapılıyo 
• Resimler en ve boy olarak küçültülebilir.
• Buton yapılabiliyor.
• Nesnelerin ve yazıların üzerine gelinince değişikler yapılabiliyor.
• Yazıyı seçince seçili arkaplanı mavi yerine kırmızıya boyayabilir
• Yazı başlıklarının altını çizebilir
• Resimlerin köşelerini ovalleştirebilir
• Yazılara gölge ekleyebilir
• Css ile butonlara, resimlere ve içerik kutularına bile gölge ekleyebiliriz.
• İnanmayacaksınız ama yazılar hatta sitenin tamamını ortalayabilirsiniz bile 

Liste bitiminde nefesimi rahatça almaya başladıktan sonra bir not css ile yapabilecekleriniz listesi yukardaki listeyi 3 e ve 4 e katlayabilir (:

CSS kodu nasıl olmalı?

seçilen_nesne {  özellik:değer;   özellik:değer;  özellik:değer;  }

Bir css kodu aşağıdaki css nasıl kullanılır? başlıklı yazımda ki 3 yöntemden üçünde de aynı yazılır. Fakat 1. yöntemde küçük bir istisna vardır ki bu istisna da 1. yöntemde css direk nesneye uygulandığı için bir seçiciye ihtiyaç duyulmaz bu yüzden yukarıda gösterdiğim css kullanım şeklindeki seçilen_nesne ve { }süslü parantezler 1. yöntemde yer almaz.

CSS nasıl kullanılır?

CSS kullanabilmenin 3 farklı yolu var. Göstereceğim 3 farklı css kullanım şeklinden en çok kullanmanız gereken 3. aşamadaki css kullanım şeklidir. Fakat yeri geldiğinde diğerlerini de kullanacaksınız.

1- Inline Styles (Html etiket içi)

Inline Styles yönteminin yanındaki parantez de bulunan Html etiket içi css kullanımı tamamen benim çevirimdir yani aslı öyle değil  Asıl adı Inline Styles ama hoş ve mantıklı bir çevirisi  olmadığından ben html etiket içi css kullanımı adını verdim. Bu yöntem basit olarak yazdığımız html taglarının içerisinde style=”” özelliğine atanan değerler ile kullanılır ve diğer iki yöntemin en farklı olanı budur. Çünkü hangi html nesnesine css uygulanacağını seçmeyip direk o nesnenin üzerine kodları yazıyoruz. Bu yöntemi kullanmak için
1-) Hangi nesneye özellik atanacağını bul
2-) Nesneye style=”” etiketini ekle
3-) Style=”” etiketi içerisine css özelliklerini gir.

Örnek:

PHP