Web sitesi açıldığı zaman ilk olarak stilleri tarayıcı okur ve o stilin kullanıldığı HTML elementlerini belirtilen özelliklere göre tarayıcı web sitesini şekillendirir.
Web sitemizdeki sayfalarımıza stillerimizi eklemizin üç yolu vardır. Bunları şu şekilde sıralayabiliriz.
İlk olarak stillerimizi CSS dosyamızdan nasıl çağırdığımıza bakalım.
Şimdi sizden not derfteriniz açmanızı ve içerisine şu kodları yazmanızı isteyeceğim. (Note defteri yerine diğer css düzenleyici başka programınız varsa onu kullanabilirsiniz. Masa üstüne sağ tıklayıp yeni- metin belgesi yolunu izleyerek yeni bir not defteri açabilirsiniz)
CSS kod yapımızın nasıl yazılacağını önceki derslerimizde incelemiştik hatırlatma amaçlı o dersimizi tekrar gözden geçirebilirsiniz. CSS kod yapısı.
<html> <head> <title>CSS Öğreniyorum</title> <link href="stildosyam.css" type="text/css" rel="stylesheet"/> </head> <body> <p>Bugün yeni bir bilgi öğrendim.</p> </body> </html>
HTML Sayfanızdaki <head> ile </head> arasında yer alan
<link href=”stildosyam.css” type=”text/css” rel=”stylesheet”/>
bizim stil dosyamız çağırmaya yarayan kodlarımızın yer aldığı bölüm. Burda
href=”stil dosyam.css” ile belirttiğimiz yerde bizim kaydettiğimiz dosyamzın adı (yani stildosyam) yer almalı ve HTML sayfamız ile CSS dosyamızın aynı klasörde bulunmalıdır. Farklı bir klasörde de bulunabilir tabi. Ama bunu href de belirtmemiz gerekir bu sefer. Başka klasörde kullanmak istiyorsak HTML sayfasına göre konumu yazmalıyız.
Dosyamızın da adını yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.
İkinci olarak HTML sayfasında CSS yazmaya bakalım
HTML sayfamızda HEAD elementlerinin arasında STYLE elementi kullanarak stillerimizi tanımlayacağız.
Aşağıdaki örneğe baktığımızda daha iyi anlayacağız.
<html> <head> <title>Başlığımız</title> <style type="text/css"> body { background-color:blue; color:black; } p { font-family: Tahoma, Verdana; font-size: 20px; } </style> </head> <body> <p>Yeni bir bilgi öğrendim bugün.</p> </body> </html>
Fark ettiğiniz üzere yine <head> ile </head> etiketleri arasına stillerimizi tanımladık.
<style type=”text/css”> ile tanımlamaya başladık ve </style> ile kapattık. Böylelikle dosyamızda belirttiğimiz stiller ilk örnekte gösterdiğimiz gibi dışarıdan bir dosyaya bağlı değil ve bağlı olmaksızın kullanılabilir durumdalar.
Son olarak HTML dosyamızın içerisinde Stil belirlemeye bakalım.
Alttaki örneği inceleyelim.
<p style="font-family: Tahoma; font-size: 14px;"> Yeni bir bilgi öğrendim bugün. ZekiCan.Net sitesinde. </p>
Burada yazımızı yazmadan önce stilini tanımlıyoruz. Hızlı çözümler üretmek için bu kullanımdan yararlanılabilir. Ama en iyi kullanım şekli birinci yöntemdir.