FrontEnd Developer RoadMap – CSS3 Tutorial 5 Internal CSS Yazmak

Merhabalar, bu yazımda CSS tanımlama biçimlerinden ikincisi Internal CSS yazma konusuna bakıyor olacağız.

Bir önceki yazımda Inline CSS yazmak konusuna bakmıştık.

Bir etiketin CSS değerlerine yerinde müdahale etmek güzel, ancak şunu düşünelim; bir Html dosyası içinde 100 tane p etiketi olsun ve bunların tamamına biz aynı CSS değerleri uygulamak istiyor olalım. Bildiğimiz Inline yöntemle bunu şöyle çözmemiz gerekirdi.

Çıktıya bakalım.

Her p etiketinin style attribute’una istediğim CSS değerlerini vermem gerekiyor. Bu durum hem kod tekrarı olması bakımından hem de tekrar tekrar uygulayıp bize zaman kaybettirmesi bakımından çok iyi bir çözüm gibi durmuyor.

Bir de şöyle bir senaryo düşünelim. Projenin bir noktasında bu rengi sarıya çevirmek istemiş olun. Bütün p etiketlerini bulup bu değeri uygulamanız gerekirdi. Gözden kaçanlar olabileceği gibi kod bakımını zorlaştırması ve ekstra maliyet çıkarması bakımından da doğru bir yaklaşım olmayacaktı.

İşte böyle durumlarda etiketlerin değerlerini tek bir noktadan yönetmemizi sağlayacak aynı Html dosyası içinde yazdığımız CSS kodlarına biz Internal CSS kodları diyoruz.

Internal CSS kodları <style> </style> etiketleri arasına yazılır ve head tag’leri içinde yazılması tavsiye edilir.

Sebebi; kodlar yukarıdan aşağıya doğru okunduğu için eğer css kodlarını Html body etiketinin sonunda ya da içinde uygularsak önce Html iskeleti gözükür sonra CSS kodları uygulanır. Bu da kullanıcının görmesini hiç istemeyeceğimiz bir durumdur.

O yüzden head tag’leri içine CSS tanımlamalarımızı yapıyoruz.

 Bu şekilde uygulamamız yeterli olacaktır.

Yavaş yavaş bir şeyler oluşmaya başlıyor. Ufaktan kendi kendimize müdahaleler değişiklikler yapabiliriz gibi. Şunu deneyelim. h1 etiketi için bir font-size CSS’i yazalım ve değerini 60px yapalım.

Yapmamız gereken şey yine <style> tag’i içine h1 diye bir selector yazıp CSS kodunu yazmak.

Son hali aşağıdaki gibi olacaktır.

<style>
 
        p{
            color: brown;
        }
 
        h1{
            font-size: 60px;
        }
 </style> 

Bu şekilde istediğiniz CSS kodları Html dosyası içinde uygulayabilirsiniz.

Artık p ile alakalı yeni bir özellik eklemek de, eski bir özelliği silmek ya da güncellemek de çok kolay.

Bir sonraki yazımda görüşmek üzere.