HTML Tasarımlarda CSS Stil Dosyası Kullanma

HTML Tasarımlarda CSS Stil Dosyası Kullanma

Daha önceden hazırladığımız sayfalarda biçimlendirme bilgilerini HTML dosyamızın içine yazıyorduk. Bu adımda ise tüm biçimlendirme bilgilerini buradan alarak oluşturacağımız CSS dosyasının içine koyacağız. CSS dosyalarını kullanarak web site tasarımınıza istediğiniz görüntüyü verebilirsiniz. Şimdi bir CSS dosyası nasıl oluşturulur ona bir bakalım…

Adobe Dreamweaver’ın File menüsünden New seçeneğine tıklayarak karşımıza çıkan pencereden CSS seçeneğine tıklıyoruz. Dreamweaver karşımıza boş bir CSS dosyası getiriyor. Aslında bu işlemi Not Defteri’nde boş bir belge hazırlayarak da gerçekleştirebiliriz.

Önceki adımlarda DIV etiketinin içine STYLE parametresiyle biçimlendirme bilgileri yazıyorduk. Şimdiyse STYLE yerine CLASS parametresini kullanarak şekillendirmek istediğimiz DIV’imize bir CLASS atıyoruz.

DIV etiketimize CLASS=“ilkbolum” ifadesini ekledikten sonra “ilkbolum” isimli class’ı CSS dosyamızın içinde tanımlamamız gerekiyor. Daha önce STYLE parametresinin içine yazdığımız biçimlendirme bilgilerini yukarıdaki şekilde CSS dosyamıza yazıyoruz.

Artık CSS dosyamıza bir isim vererek onu kaydetmeliyiz. CSS dosyamızı kaydettiğimiz yer büyük önem taşıyor. Çünkü bir sonraki adımda HTML belgemizde bu CSS dosyasının nerede olduğunu belirtmemiz gerekecek.

HTML dosyamızın <HEAD> ile </HEAD> etiketleri arasında kalan bölümüne Stil.CSS dosyamızın bulunduğu konumu belirten <LINK REL=“stylesheet” HREF=“Stil.CSS” /> satırını giriyoruz ve CSS dosyamız kullanıma girmiş oluyor.