CSS

Css Kullanımı & Html Sayfaya Css Bağlama

Css Kullanımı

Html sayfa hazırlıyoruz ve Css kodları ile sayfamızın görselliğini iyileştirmek istiyoruz. Yani sayfamızda Css kodları kullanmak istiyoruz. Peki bunu nasıl gerçekleştirebiliriz? Css kodları Html sayfada nasıl kullanılır? Html sayfaya Css kodu nasıl eklenir? Detaylı inceleyelim.

3 farklı css kullanım türü bulunur. Bunlar; Yerel Css, Genel Css, Harici Css

Yerel Css: Body bölümünde yer alan etiketlerin içerisinde kullanılabilir. Sadece yazıldığı etikete etki eder. Örneğin; herhangi bir başlık etiketi içerisine css eklendiyse; sadece ilgili başlık etiketinin özelliklerine müdahale edebilir. Dolayısı ile tek kullanımlık Css türüdür.

Yerel Css Kullanım Örneği:

Gördüğünüz üzere <h1> etiketi içerisinde css kullandık. Özellik olarak rengin kırmızı olmasını istedik. Yerel Css şeklinde kullandığımız için bu özellik sadece ilgili h1 etiketine etki edecektir.

Genel Css: Bir Html sayfasının tamamına etki edebilecek Css tanımlamaları yapmak için kullanılabilir. Css kodları sayfada <head> etiketi içerisine yazılır. Css özellikleri bir sınıf oluşturulup kaydedilir. Hangi etikette ilgili özellikler kullanılmak isteniyorsa; sınıf adı çağrılarak Css bağlantısı sağlanır ve özellikler aktif hale getirilir.

Genel Css Kullanım Örneği:

Gördüğünüz üzere bu örnekte <head> etiketi içerisine css oluşturulup, h1 etiketine sabit olarak kırmızı renk özelliği eklenmiştir. Ardından sayfa içerisinde etiket kullanılmış ve css bağlantısı sağlanarak “Yazilon.com” yazısı kırmızı renk olmuştur.

Harici Css: En çok tercih edilen kullanım türüdür. Farklı bir css sayfası hazırlanır. Bu sayfada doğrudan etiket isimlerine bağlı ya da oluşturulacak değişken isimler ile çeşitli css özellikleri tanımlanır. Ardından Html sayfaya css dosyası bağlanır. Böylece etiketlerde ilgili Css sayfasındaki tüm özellikler kullanılabilir. En büyük avantajı internet sitelerinde birden çok sayfa bulunduğu için tek sayfada yazılmış Css özelliklerini tüm sayfalarda kullanabilme esnekliğidir.

Harici Css Kullanım Örneği:

style.css sayfası

index.html sayfası

Gördüğünüz üzere (style.css) adında bir Css sayfası oluşturduk ve içerisine h1 etiketi için kırmızı renk özelliği tanımladık. Sonrasında Html sayfamızın <head> bölümünde Css sayfamızı bağladık. Ardından sayfamızda h1 etiketini kullandığımızda başlığımız kırmızı renk oldu.

Yukarıdaki üç farklı Css kullanım türünü aynı örnek üzerinden inceledik. 3 kullanım şeklinde de göreceğimiz ekran görüntüsü aşağıdadır.

Örneklerin Ekran Görüntüleri:

Css Kullanımı

Böylece bu dersimizde Html sayfada Css kodu kullanımına ilişkin temel bir bilgi edinmiş, Css kullanım çeşitlerini ve farklarını görmüş, basit bir örnekleme pekiştirme yapmış olduk.

+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