Web sitesi yapmaya başladığınız ilk anlarda öğrendiğiniz ilk şey bir html dosyası oluşturmak ikincisi ise o html dosyasına nasıl stil verileceğini oğrenmektir. Bunu da html dosyasına css ekleyerek yapıyoruz. (cascading style sheet)
Css dosyasını Html e bağlamak
En çok kullanılan metod budur. ".css" uzantılı dosyanızı html dosyasının "head" kısmı dahilinde çağırırsınız.
<link rel="stylesheet" type="text/css" href="stiller.css" media="screen" />
- "rel" ve "type" çağırdığımız dosyanın css olduğunu belirlemek için kullandığımız özellikler.
- "href" dosyanın konumunu belirtir. o html nin konumu referans alınarak yazılmalıdır.
- "media" ise görüntüleme tekniğini belirtir. Mesela "screen" normal ekranlar içinken burayı "print" yaparsanız çıktı halindeki stilleri belirtmiş olursunuz.
- css dosyasını böyle çağırmak bir çok anlamda en mantıklısıdır. Tarayıcı bir kere stillere ulaşmıştır her seferinde onları yüklemez. Site bakımı yaparken yararlıdır. Her düzenleme için tek css dosyasını editlemeniz yeterlidir.
- Bu şekilde birden fazla css dosyası bağlantısı eklenebilir.
Css i Html içine yerleştirmek (embed)
Html içine başka bir etiket yerleştirir gibi style etiketi açıp css satırlarını buraya yazmak şeklinde gerçekleşir.
<style media="screen" type="text/css">Buraya stiller gelecek</style>
- "media" ve "type" yine yukarıdakiyle aynı özellikle taşır.
- Sayfalara tek tek koyduğunuzu varsayarsak, istisnai durumlar dışında yararlı bir yol değildir.
- Başka birisine örnek bir sayfa atarken tüm stilleri bu etiketler dahiline yazarak tek bir html sayfası yollarak sitenizi görüntülemelerini sağlayabilirsiniz.
- Eğer içeri ile birlikte stilleri de dinamik olan bir site yapacaksanız mantıklı bir yol olabilir. Bu şekilde hepsini aynı yere basabilirsiniz.
Bir html öğesine direk olarak içinden stil vemek demektir. Çoğunlukla gerekli ve mantıklı bir yol değildir.
<h2 style="color:red;background:black;">Arka fonu siyah, kırmızı renkli bir başlık</h2>
- Eğer css dosyalarına erişimiz yoksa ya da test yapmak istiyorsanız bu yöntemi kullanabilirsiniz ama artık tarayıcıların kendileri bir tester gibi kullanılabildiğinden çok gerekli bir opsiyon değil.
- Mümkün olduğunca kaçınmanız gerekn bir css ekleme yöntemidir.
- Site bakımını imkansıza ykaın hale getirir.
Zaten var olan bir css dosyasını hiç bozmadan üzerinden başka bir css dosyası eklemenizi sağlar. Css dosyasına yazmanız gereken:
@import "yenistiller.css";
- Dosya konumu o an içinde bulunulan css dosyası referans alınarak verilir.
- Statik onlarca html sayfası olan bir proje ile uğraşırsanız ve zaten sahip olduğunuz css dosyasını bozmak istemiyorsanız etkili bir yöntemdir.
- Html dosyalarında birden fazla css çağrısı yapmak istemiyorsanız ya da onlara direk ulaşımınız yoksa etkili bir yöntemdir.