CSS dosyalarını biz birden fazla ihtiyacımıza uygun olacak şekilde HTML ile oluşturduğumuz web sayfalarına ekleyebiliriz. Bunun için ise bizim hangi CSS ekleme çeşitlerini amacına uygun olarak kullanmamız gerekecektir.

 

CSS çeşitlerine göz atacağımız zaman ise bizler 3 farklı şekilde CSS dosyalarını HTML sayfasına ekleyebiliriz. Bunlar ise :

  1. External
  2. Internal
  3. Inline

 

olarak karşımıza çıkmaktadır. Dilerseniz şimdi de bu CSS türlerinin anlamları ve nasıl eklenebileceğine bir göz atalım.

 

 

Harici CSS Dosyası Ekleme

Harici olarak adlandırdığımız CSS dosyası aslında External olarak adlandırılmaktadır. Bizler CSS dosyasını başka bir sayfada oluşturarak kullanmak istediğimiz HTML sayfasına include etme işlemidir aslında. Yani başka bir sayfada oluşturduğumuz CSS kodlarını içeren ve uzantısı css olan dosyayı kullanmak istediğimiz HTML dosyasına çağırarak o HTML sayfasında dışarıda olan CSS etiketlerinin çalışması sağlanır. Bunun için ise :

 

<link rel="stylesheet" type="text/css" href="a.css">

 

Yukarıda yer alan kod satırını oluşturmuş olduğumuz HTML sayfasında “<head>” etiketleri arasına eklemeliyiz. Bu sayede bizler dosya yolunda belirtmiş olduğumuz CSS dosyası içinde yer alan özellikler bu sayfada uygulanmaya başlayacaktır.

 

Bu yöntem bizlere bir çok fayda sağlamaktadır. Eğer harici bir dosyadan çekme işlemini gerçekleştirmek değilde her HTML sayfasında bu kodları yazmak zorunda kalacaksınız. Eğer toplu bir şekilde değiştirmeye kalkacak olsaydınız tüm sayfaları teker teker düzeltmek zorunda kalacaktınız. Fakat bu yöntem sayesinde sadece bir dosya üzerinden bir çok düzenleme işlemini yapmanız mümkün olacak ve bu CSS dosyasını eklediğiniz tüm HTML dosyalarında aynı değişiklik gerçekleşecektir.

 

 

Internal CSS Ekleme Yöntemi

Internal CSS ekleme yönteminde ise bizler sayfamızın “<head>” tagları içine o sayfaya özel CSS eklemek için bu yöntemi kullanırız. Bu eklediğimiz CSS kodları ise sadece ve sadece o sayfada etkili olacaktır. Zaten bu zamana kadar bir çok HTML derslerinde Internal CSS yöntemini kullandık.

 

<html> 

<head> 

<style> p{ 

color : crimson; 

} 

</style> 

</head>

 

Yukarıda yer aldığı gibi HTML ile hazırlanan web sayfamızda ki head tagları içine yazacağımız olan “<style>” etiketi içine istediğimiz etikete değer ve özellik belirterek bu CSS yolunu kullanabiliriz.

 

 

Inline CSS Ekleme Yöntemi

Bu kısım ise aslında çok kolay ve isminden de anlayabileceğimiz şekilde satır içi CSS ekleme işlemidir. Bu ekleyeceğimiz CSS kodu ise sadece ve sadece o satırda geçerli olacaktır. İsterseniz kafamızın içinde oluşması için nasıl ekleyebileceğimiz üzerinden devam edelim.

 

<h2 style="color:brown; background-color: black">Başlık</h2>

 

Yukarıda ise bizler artık ne Internal nede External olarak bir CSS ekleme işlemi yerine direkt olarak bir etiketin içinde ve sadece onda geçerli olacak bir şekilde CSS ekleme işlemini etiketin içinde bir CSS kodu ekleyecek olduğumuzu “style”  etiketi ile belirttik ve arından eşittir işareti koyup iki tırnak arasına bu etikette geçerli olmasını istediğimiz CSS kodlarını yazıyoruz. Unutmamız gereken diğer bir nokta ise eğer birden fazla CSS kodu yazacak isek bunların arasında noktalı virgül koymamız gerektiğidir.

Gökmen Efsun {efsungokmen}

Teknoloji dünyası sınırsız bir alandır. Bu alanda bilgi paylaştıkça çoğalır.

Bir cevap yazın

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