CSS Nedir? | CSS Temel Bilgiler

0 287

CSS, tasarımsal estetikten yoksun HTML dökümanının görünüm özelliklerini değiştirmeye yarayan biçimlendirme dilidir. İngilizce ‘Cascading Style Sheets‘ yani Basamaklı Stil Şablonları tanımının kısaltılmış halidir.

CSS web teknolojisinin gelişmesine öncülük etmiş 3 ana dilden biridir.Düz metin olarak sunulan ilk web sitelerinden bugün karşımıza çıkan modern ve yaratıcı tasarımlara sahip siteler CSS ile şekillenmiştir.

Neden CSS Kullanılır?

Çok nadir de olsa halen bulabileceğiniz bazı web siteleri veya popüler sitelerin ilk zamanlarına bakarsanız, tasarımdan ne kadar uzak olduğunu görürsünüz.Bu siteler genelde düz metin ağırlıklıdır ve tasarım olarak göze hitap etmezler.

Çünkü bu sitelerde CSS kullanılmamış, onun yerine az da olsa HTML stil özellikleri kullanılmıştır.HTML, etiketler sayesinde sitenin iskeletini oluşturmaya yarar ve sadece style attributes (niteliğinin) sağladığı kadar görünümde değişiklik yapabilirdiniz.

Başlamadan Önce?

Modern web teknolojisinde CSS, HTML ile ayrılmaz bir bütün olarak düşünülür.Esas görevi bir HTML belgesinde bulunan elementleri biçimlendirmektir.Bu nedenle CSS’i kullanabilmek için HTML bilmeniz gerekir.

Nasıl Kullanırım?

CSS bir web sayfasına sayfa düzeyinde veya eleman düzeyinde olmak üzere iki şekilde etki eder.CSS seçicileri yardımı ile bir sayfanın tamamına veya bir kısmına müdahale etmeye sayfa düzeyinde, sadece bir elemente özel stil tanımlamasına ise eleman düzeyinde CSS tanımlaması denir.

Nasıl Eklenir?

CSS kodlarını HTML belgesinde kullanmak için 3 farklı yöntem bulunmaktadır.

  • 1- Inline Style (element içerisinde stil tanımlama)
  • 2- Internal Style Sheet (Dahili stil tanımlama)
  • 3- External Style Sheet (Harici Dosya ile stil tanımlama)

Not : 1. yöntem element düzeyinde stil tanımlaması için kullanılırken, 2. ve 3. yöntem yukarıda bahsettiğimiz sayfa düzeyinde stil tanımlaması içerisine girer.

Inline Style (Element içerisinde stil tanımlama)

Element düzeyinde stil tanımlamak için kullanılan bu yöntem, HTML etiketlerinin style niteliği (attribute) kullanılarak, elemente özel biçimlendirme yapılır.

Aşağıdaki örnekte <p> etiketine style niteliği tanımlanmış ve color ve font-size özellikleri kullanılarak stil tanımlanması yapılmıştır.Bu şekilde tanımalama sadece bu <p> elementine stil tanımlanır, sayfadaki diğer p elementleri bundan etkilenmez.

İpucu : Bu yöntem web teknolojisnin ilk yıllarında kullanılmıştır.Şimdiler de kullanımı oldukça sınırlıdır.

Internal Style Sheet (Dahili stil tanımlaması)

Sayfa düzeyinde stil tanımlaması yapmak için kullanılan bu yöntem de CSS kodları HTML belgesi içerisindeki head elementinin arasına yazılır.Bunun için style etiketi kullanılır.

Dikkat : Yukarıdaki yöntemde kullanılan ‘style’ bir HTML etiket niteliği iken burada kullanılan ‘style’ HTML etiketlerinden biridir.

Aşağıdaki örnekte HTML belgesi içerisindeki head elemanın içerisine tanımladığımız style etiketinin arasına p elementi için stil tanımlaması yapıyoruz.Yukarıdaki yöntemden farklı olarak burada p element seçicisini kullanarak sayfadaki bütün p elementlerine CSS tanımlaması yapıyoruz.

İpucu : Gerçek projelerde CSS kodlarının fazla olması HTML sayfasının boyutu artıracak ve sayfanın açılış hızını yavaşlatacaktır.Bu sebeple bu yöntem genelde test aşamsında ya da az miktarda CSS gerektirdiği zaman kullanılır.

External Style Sheet (Harici Dosya ile stil tanımlaması)

Bu 3 yöntem içerisinde en fazla kullanılan ve tavsiye edilen harici dosya ile stil tanımlama yöntemidir.Mantık olarak CSS kodlarını harici bir dosya da tutup, bu dosyayı HTML belgesine bağlamaktır.

CSS kodlarını barındıran dosya .css uzantılıdır.HTML belgesine ilişkilendirmek için link etiketi kullanılır. Link etiketi HTML belgesinde head elementinin içerisinde yer alır.

Aşağıdaki örnek bir HTML belgesinde harici bir CSS dosyasını eklemeyi gösteriyor.Burada link etiketinin href niteliği ile harici .css dosyasının yolu (path) belirtilirken, rel niteliği de çekilen dosyanın ne tür bir dosya oldugu HTML belgesine bildirilir.Burada stylesheet değeri, still dosyası olduğunu tanımlar.

3. yöntem ile ilgili bir örnek yapmadım.Çünkü 2. yöntemdeki örneği head elementi arasında değil de, harici dosyaya yazmanız yeterlidir.Tabi ki harici dosyaya yazarken style etiketi kullanmıyoruz.

CSS derslerine ön giriş niteliğinde ki bu yazıda CSS nedir? Neden CSS kullanılır? CSS ne işe yarar? nasıl kullanılır? gibi sorulara detaylı bir şekilde yanıt vermeye çalıştım ve gerekli yerlerde CSS kod örneklerini ekleyerek daha iyi anlaşılması sağlamaya çalıştım.

Aklınıza takılan her hangi bir yer varsa yorum kısmında sormaktan çekinmeyin.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin