WTP – 6. Hafta CSS (Stil Şablonları)

CSS Nedir?

Stil Şablonları yani CSS (Cascading Style Sheets) hazırladığımız web sitelerinde istediğimiz zaman kullanmak üzere şablonlar hazırlamamıza olanak tanır. Web sitelerini daha güzel ve görsel açıdan daha zengin yapabilmek için CSS’in nimetlerinden yararlanmamız gerekir. CSS kullanarak bir web sitesinde istediğimiz öğeleri bir yerden değiştirebiliriz. Size bunu bir örnekle açıklayayım. 5 sayfalık bir web sitesi yaptınız. Bu 5 sayfada kurumsal kimlik oluşturmak adına H1 etiketlerini ki bunlar 100 tane olsun, mavi ve Arial fontunda oluşturdunuz. Müşterinize gösterdiğinizde rengin mor olmasını ve yazı tipinin Comic Sans olmasını istediğinde oluşturduğunuz 100 tane H1 içindeki tüm kodları değiştirmeniz gerekir. Ancak CSS ile iki yerdeki değişiklikle müşterinizin isteğini yerine getirebilirsiniz.

CSS bize ne kazandırır?

CSS kullanmak en başta zaman kazandırır. Kod kısmı ve tasarım kısmını ayırdığınızda daha yönetilebilir siteler elde edersiniz. Herhangi bir sorunla karşılaştığınızda arap saçına dönen kodlarla uğraşmaz, kod kısmı ile tasarım kısmını birbirinden ayırmış olursunuz.
Görsel açıdan daha zengin içerikler oluşturabilirsiniz. Bu da web sitesini yaptığınız müşterilerinizin memnuniyet seviyesini artıracaktır.

CSS Çeşitleri

  1. Yerel CSS : Bir etiketin içine yazdığımız stil öğesine Yerel CSS denir.
  2. Genel CSS : <head> </head> etiketleri arasına yazdığımız stil öğesine Genel CSS denir. Bu stil türünde tüm sayfadaki etiketler etkilenir.
  3. Harici CSS: Global Stil Şablonu olarak da adlandırılır. Tüm CSS kurallarını içeren .css uzantılı bir dosya eklenerek sitede uygulamak istediğiniz her sayfada <head> </head> etiketi arasına eklenir.

Yerel CSS :

Belirli bir HTML etiketi için kullanılır. Etiketin style=”…” özelliği kullanılarak istenilen değişiklikler gerçekleştirilir.

Genel CSS :

<head> </head> etiketleri arasına yazdığımız stil öğesine Genel CSS denir. Bu stil türünde tüm sayfadaki etiketler etkilenir. Genel CSS kullanmak sayfadaki değişiklerin tek yerden idare edilmesini sağlar. İstenilen Stiller <style > …. </style> etiketleri arasına yazılır.

Harici CSS

Global Stil Şablonu olarak da adlandırılır. Tüm CSS kurallarını içeren .css uzantılı bir dosya eklenerek sitede uyguşamak istediğiniz her sayfada <head> </head> etiketi arasına <link href=”…” > ile eklenir.

Stilim.css dosyası :

Harici CSS eklenen index.html Dosyası

CSS türlerini gördük bu türlerin kullanım amacınıza göre istediğiniz zaman kullanabilirsiniz. Hepsinin bir arada yer aldığı örnek aşağıdadır.

CSS Çeşitleri

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.