Merhaba arkadaşlar, şuanki anlayacağım şey stil yani css dosyasını oluşturup bunu html dosyası içinden çağırmak/getirmek olucak.

Öncelikle ihtiyacımız olan şey bir html dosyası ve birde stil(css) dosyasıdır.

temel olarak bir html dosyası oluşturuyoruz. Bunu daha önceki konumuzda görmüştük. Bu kodlar html'in olmazsa olmazıdır.

Şimdi ise daha önceki konumuzdaki ile arasındakinleri anlatacağım aslında ikiside aynı tek farklı birisi html dosyasının içine css kodlarını işliyoruz şimdi göstereceğim konuda ise stil dosyası içine işliyoruz ve bunu html dosyasına çağırmayı veya getirmeyi göreceğiz.

Bunu getirip çağırmak için ise öncelikle bir stil dosyası olması gerekli ve bu stil dosyası kesinlikle uzantısı .css ile bitmeli.


/* litmus css dökümanları */
#litmusdiv{
background-color:#356769 ;
width:300;
height:200;
}
yukarıdaki kodları stil dosyası içine yazıyoruz ve kaydediyoruz

background-color arkaplan rengini ayarlar
width genişliği ayarlar
height yüksekliği ayarlar


<html>
<head>
<title>Html'i stil dosyası ile kullanma - LitmuS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" />
</head>
<body>
<div id="litmusdiv"> Bu da daha önceki konumuza kıyasla html'i stil dosyası ile kullanmaktır.</div>
</body>
</html>
Şimdi ise yukarıda oluşturduğumuz stil dosyasını html dosyasına getirmeyi göreceğiz.

<link rel ile başlayan bölüm stil dosyasını çağıracağımız bölümdür buradaki en önemli noktalardan bir tanesi ise href konu ile başlayan bölümdür onu yanlış yazdığınız zaman stil dosyanızı okumaz ve html dosyası içine getirmez.

Şuandaki konuma göre stil dosyamız bir style klasörü içinde style.css olarak oluşturulup kayıt edilmiştir.

Buradaki asıl işlemin mantığını anlatayım size daha önceki konumuzda bu kodları html dosyası içine yazıp html dosyasının boyutunu arttırıp html'in şişmesine yol açıyordu ve her işlem için ayrı ayrı kod yazmanıza ve karmaşaya yol açıyordu style.css ise bu işi kolaylaştırıyor style.css e istediğiniz kodları yazıp bunu div id 'ler ile çağırıp işlemlerinizi kolaylaştırabiliyorsunuz.

Burada genişliği yüksekliği rengi değiştirip kendinize göre düzenlemeler yaparak elinizi alıştırabilir kodları tanıyabilirsiniz.