CSS Nedir?
CSS (Cascade Style Sheet) HTML elementlerini görsel açıdan (renk, yazı şekli, arka plan rengi, genişlik, yükseklik, pozisyon durumu vb) biçimlendirmemize imkan sağlar.
CSS, Basamaklı Stil Şablonları veya Basamaklı Biçim Sayfaları olarak da anılır.
HTML tek başına yazıldığında bir not belgesi gibi görünür. HTML elementlerine stil veren CSS’dir. HTML üzerine CSS nasıl uygulanır?, CSS nasıl yazılır?, CSS nasıl kullanılır? bunları inceleyelim.
CSS’in sahip olduğu seçiciler vardır. HTML etiketlerinde tanımladığımız seçici isimleriyle birlikte CSS kullanarak etiketleri biçimlendiririz. HTML elemana stil vermek için, CSS seçiciler kullanılır. Seçicilerin en çok kullanılanları id veya class ‘lardır. Bir diğer yöntem ise direkt olarak HTML içine CSS değerleri yazmaktır.
CSS nedir, ne işe yarar? Neden kullanılır?
CSS, (Cascading Style Sheets) yani, basamaklı stil şablonları anlamına gelmektedir. CSS bir biçimlendirme dilidir. Web site sayfalarını kendi stil kurallarına göre şekillendirebilme olanağı verir. Kendine özgü kuralları bulunan CSS, javascript ve HTML ile üst düzey web sayfaları hazırlanabilir.
Web tasarım alanında yoğun olarak kullanılan CSS, html kavramından sonra karşınıza çıkan ilk biçimlendirme dilidir. HTML (HyperText Markup Language) ile birlikte entegre şekilde çalışan CSS, oluşturduğunuz web sayfalarında yapacağınız özellikleri geliştirmenize olanak sağlar.
Web sayfalarının renklerini, fontlarını, görsel efektlerini, mizanpajını ve tüm öğeleri CSS stil şablonlarıyla biçimlendirebilirsiniz. Css nedir ne işe yarar Sorusuna cevap verdik. Şimdi nasıl yapılır inceleyelim.
CSS İle Kodlama
Esnekliği ile ön plana çıkan CSS, web sayfalarının daha kolay tasarlanmasını sağlar. İster tüm sayfalara ister tek bir sayfa üzerinde görsel özellik değiştirme işlemini yapabilirsiniz.
CSS kodlamaları genel olarak iki türde uygulanabilir. Birinci tür direkt olarak HTML kodlarının içerisinde yer alan head bölümüne ya da body bölümüne, yani direkt tag alanının içerisine dahil edilebilir. İkinci tür ise harici bir CSS dosyası oluşturmak ve bu dosyayı HTML dokümanının içerisine yerleştirmektir.
CSS ayrıca 3 farklı şekilde kullanım sunan ve oldukça esnek bir yazılım imkanı sunan bir stil dilidir. Harici stil sayfası, dahili stil sayfası ve etiket biçimlendirme olarak web sayfalarınıza gelişmiş kodlar ekleyebilirsiniz.
CSS Nedir ?
Cascading Style Sheets (Basamaklanmış Stil Katmanları) kısaltılması olan CSS, web sayfalarını şekillendirmek için kullanılan bir işaretleme dilidir. CSS kullanarak web sayfasının görünümünü değiştirebiliriz. Bir web sitesinin bilgisayarlar, mobil cihazlar ve tabletler gibi farklı cihazlarda nasıl görüneceğini CSS ile tanımlayabiliriz. CSS, JavaScript, C#, Java, Python, C++ gibi bir programlama dili değildir. CSS, internet sitelerindeki HTML elementlerine tasarım vermek için kullanılan işaretleme dilidir.
CSS Syntax
Selector, style vermek istediğimiz HTML öğesini ifade eder.
Declaration, noktalı virgülle ayrılmış bir veya birden fazla CSS tanımlama kısmıdır.
Property, özelliğin ismidir.
Value, özelliğe vereceğimiz değerdir.
Inline (Satır İçi), Internal (İç), External (Dış) CSS Kullanımı
Üç adet CSS stil sayfası türü vardır.
1- Inline (Satır İçi) CSS, sadece tanımlandığı etiket için geçerli olmasını istediğimiz CSS kodlarımızı inline olarak belirleriz. Örneğin;
2- Internal (İç) CSS, sadece bulunduğu HTML sayfasını ilgilendirir. Örneğin, index.html sayfamızda ki tüm <h2> etiketleri için color #111827 ve <p> etiketleri için color yani yazı rengi mavidir. Fakat diğer bir HTML sayfamız için bu özellikler etkin olmaz. Eğer index.html sayfasında ki aynı özellikleri diğer bir HTML sayfamız için de kullanmak istiyorsak aynı tanımlamaları o sayfada da yapmamız gerekecektir. Dolayısıyla tek bir HTML sayfasına ait olan özellikleri Internal CSS olarak tanımlamak mantıklıdır.
3- External (Dış) CSS, normal bir HTML dosyamızdan bağımsızdır ve .css uzantılır. External CSS kullanmışsak muhakkak HTML dosyamıza linklememiz gerekir. Eğer bu işlemi yapmazsak CSS dosyamız işlevsiz kalacaktır. Örneğin, .css uzantılı dosyamızın içerisine aşağıdaki kodları yazıyoruz.
Daha sonra HTML sayfamıza geri dönüp bu yazmış olduğumuz External CSS kodunu <head> bölümüne aşağıdaki gibi linkliyoruz.
Bu 3 CSS türünden en yaygın kullanılanı External CSS’dir. Kod karmaşıklığını önleyerek daha düzenli bir görünüm sağlar.