CSS

Css Sayfası Oluşturma

Css Sayfası Oluşturma

Web sayfamızda Css kodları kullanmak istiyoruz ve bunu dışarıdan bir css dosyası kullanarak gerçekleştireceğiz. Bu durumda ne yapmamız gerekir? Elbette öncelikle bir css sayfası oluşturacağız. Ardından css sayfamızı ana sayfamıza bağlayacağız. Adım adım inceleyelim.

En basit şekilde sıradan bir Not Defteri yardımıyla css sayfası oluşturabiliriz. Css sayfalarında dosya uzantısı (.css) olmalıdır. Bu yüzden oluşturduğumuz sayfanın uzantısını da değiştirdikten sonra css kodlarımızı rahatlıkla yazabiliriz.

Css Sayfa Oluşturma:

Html Sayfa Oluşturma dersimizde de anlattığımız gibi bir web tasarımcı bilgisayarındaki dosya uzantılarını mutlaka görmelidir. Eğer; dosya uzantılarınızı göremiyorsanız; Windows Dosya Uzantılarını Gösterme dersimizi inceleyiniz.

Dosya uzantılarımızı görebiliyorsak; ilk olarak Mouse Sağ Tık -> Yeni -> Metin Belgesi yolu ile bir not defteri oluşturuyoruz.

Css Sayfa Oluşturma

Ardından dosyamızın üzerine gelip Mouse Sağ Tık -> Yeniden Adlandır yaparak dosyamızın isim ve uzantısını yazıyoruz.

Css Sayfa Oluşturma

Biz (style.css) şeklinde isimlendirdik. Şuanda Css sayfamız oluşmuş durumda.

Css Sayfa Oluşturma

Burada dikkat etmemiz gereken uzantının mutlaka (.css) olmasıdır. Style şeklinde isimlendirmemizin nedeni ise; web sitelerinin ana css sayfaları genellikle (style.css) şeklinde isimlendirilir. Bu bir zorunluluk olmadığı gibi, kullanım alışkanlığı olarak tavsiye edilebilir.

Peki css sayfamızı oluşturduk, nasıl düzenleyeceğiz? Css sayfamızı Not Defteri ile açarak basit şekilde düzenleyebileceğimiz gibi; Notepad++ veya Dreamweaver gibi gelimiş programlar da kullanabiliriz.

Şimdi Css dosyamızı oluşturduk, sayfamıza css kodlarımızı yazdık. Peki web sayfamıza css sayfamızı nasıl bağlayacağız? Html sayfaya css sayfası bağlama kodu nedir? bunu göreceğiz.

Html Sayfaya Css Sayfası Bağlama Kodu:

Gördüğünüz üzere tek satırlık bir kod yardımı ile oluşturduğumuz Css sayfamızı Html sayfamıza çağırmış (bağlamış) olduk. Css sayfamızda yazdığımız tüm özellikler şuanda web sayfamızda kullanılabilir hale gelmiş oldu. Bu kodlarda dikkat etmemiz gereken nokta; bu bağlantı kodu mutlaka head etiketi içerisinde yer almalıdır. href kısmındaki dosya ismini (Örnekte style.css) kendinize göre değiştirerek kullanabilirsiniz.

+1000 Abone Arasına Katılmak İster misin?

Yeni yazıları kaçırmamak için mail sistemimize abone olabilirsiniz.

Abonelik İçin Teşekkürler!

Hata Var! Daha Sonra Deneyebilirsiniz!

Yorum Yap