1. Gün: CSS’e başlamak

Bir web sayfası iki kısımdan oluşur. Bunlardan ilki HTML’nin yaptığı kısım işaretleme, ikincisi ise CSS’in yaptığı stil verme. Şimdi ilk olarak işaretleme ne demek onu açıklamak gerekiyor. HTML’yi biz paragraflarımız, yazılarımız, resimlerimiz, videolarımız gibi nesneleri sayfamıza yerleştirmek için kullanıyoruz o kadar. Buna işaretleme adını veriyoruz. Yani sayfada nerede yazı var onu işaret ediyoruz. CSS’te ise işte bu işaret ettiğimiz yazıların, resimlerin ne şekilde gözükeceğinizi ayarlıyoruz. Yani stil veriyoruz.

CSS ile stil nasıl verilir?

CSS ile stil vermek için önce neye stil vereceğimizi bilmemiz gerekir.  Hemen örnek verelim:

Yukarıdaki HTML belgesinde ki h1, h2 başlıklarına stil vermek istediğimizde ise 5,6 ve 7. satırdaki kodları ilave edebiliriz.

Sayfamıza böylelikle bir stil verdik. Unutmadan söylememiz gerekir ki sayfamızda ki 6. satır CSS kodları diğer tüm satırlar ise HTML kodları idi. Fazla kafa karıştırmadan devam edelim. Peki biz stil vermek için illa <style>….</style> etiketleri arasına mı yazmalıyız. Cevap:

Hayır

Peki stilleri (CSS) başka nasıl yazabiliriz ?

Üç yöntemi var. Asıl kullanacağımız yöntemi sonda anlatacağım 🙂

    1. Satıriçi stil verme (inline): Bu yöntemde html etiketine aşağıdaki gibi stil verilebilir.
      <p style="font:"Times New Roman",serif; color:#666;">İşte burdaki yazıya inline stil uygulayarak yazıtipini ve rengini değiştirdik </p>
      Peki neden bu yöntemi tercih etmiyoruz?  Çünkü sayfada ki tüm paragraflara stil vermeye kalktığımızda hepsini teker teker yazmak zorunda oluruzda ondan. O yüzden bu seçeneği eliyoruz.
    2. Gömülü stil verme (embedded): Bu yöntem ise bizim örnekte kullandığımız yöntem. <head> etiketleri arasına <style> etiketini açarak CSS kodlarımızı yazabiliyoruz.

      Bu yöntemin dezavantajı ise onlarca HTML sayfanız olduğunu düşünün ve hepsinde de aynı stilleri uygulayacaksak, her bir sayfaya tek tek bu stilleri yazmak durumunda olurduk. O yüzden bu seçenekte elenmiş oldu.
    3. Diğer ve son yöntemse harici bir stil dosyası kullanmak (external): Tıpkı bir html belgesinin olduğu gibi stil dosyasınında bir uzantısı vardır ve bu uzantı da .css ‘tir. Birden fazla html belgesi tek bir css dosyasını kullanarak sayfaların görünümü ayarlanabilir. Tam tersini söylersek: tek bir css dosyası düzenlenerek tüm html belgelerinin görünümü değiştirilebilir.  HTML belgesine hangi CSS dosyasını kullanacağını belirtmek için head etiketleri arasına

      yazılmalıdır. Tabi burada HTML dosyanızla CSS dosyanızın aynı klasörde olması gerekiyor ve CSS dosyamıza stil.css adını vermek gerekiyor. Şimdi ilk örneğimizi bu yöntemle nasıl kodlayacağız onu gösterelim.

      Şimdi de stil dosyamıza yazacağımız kodlara gelelim:

      Son olarak şunu da ifade ederek bu konuyu kapatalım. Bazı web sitelerinde head etiketleri arasına

      yazıldığını görebilirsiniz. HTML 5 ile birlikte bu tanımlama da type parametresinin yazılmasına gerek kalmadığından biz de ornek1.html dosyamızda bu parametreyi yazmadık.

Bir Cevap Yazın

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