CSS Kullanımı
CSS Kullanımı
CSS kullanmamızın 2-2 = 4 yöntemi vardır.. Şimdi sırasıyla bu yöntemleri inceleyelim..
1) Sayfa içinde CSS kullanımı (style="")
Bu yöntem ile sayfa içindeki tüm HTML elemanlarına CSS uygulayabiliriz.. Tek yapmamız gereke elemanların başlangıcına style="" eklemek ve tırnak içine gerekli css kodunu yazmaktır.. Örnek olarak paragraf elemanımızın rengini kırmızı yapmak istersek aşağıdaki şekilde olmalıdır;
<p style="color: red">Bu bir paragraf denemesidir</p>
2) Head tagları arasında CSS kullanımı (text/css)
Bu yöntem ile harici bir CSS dosyası oluşturup çağırmaya gerek duymadan direk HTML sayfamız üzerinde bir CSS alanı oluşturarak tüm gerekli CSS kodlarını yazabiliriz.. Örnek olarak yine paragraf elemanımızın rengini kırmızı yapalım.. Ancak bu sefer HTML sayfamızı kodlarıyla birlikte yazıyorum aşağıya;
<html>
<head>
<title>CSS Dersleri</title>
<style type="text/css">
p {color: red}
</style>
</head>
<body>
<p>Bu bir paragraf denemesidir.</p>
</body>
</html>
<head>
<title>CSS Dersleri</title>
<style type="text/css">
p {color: red}
</style>
</head>
<body>
<p>Bu bir paragraf denemesidir.</p>
</body>
</html>
3) Harici bir CSS dosyası oluşturup HTML sayfasına çağırma (link ile)
Bu yöntem ile HTML sayfamızdan bağımsız harici bir CSS dosyası oluşturucaz.. (CSS dosyası oluşturmayı bilmiyorsanız videoyu izleyerek öğrenebilirsiniz) Daha sonra bu oluşturduğunuz CSS dosyasını HTML sayfamızda head taglarımızın arasında link ile çağırıcaz..
<link rel="stylesheet" type="text/css" href="style.css" />
Yukarıdaki kodumuz sabittir ve değişmezdir.. Ancak örneğin link'den sonra rel'de gelebilir type'de gelebilir href'de gelebilir.. Bunların sırası önemli değildir.. href kısmına oluşturduğumuz CSS dosyamızın yolunu belirtiriz.
4) Harici bir CSS dosyası oluşturup HTML sayfasına çağırma (@import ile)
Bu yöntemde 3.yöntem'e benziyor.. Harici bir CSS dosyasını çağırıcaz yine.. Ancak bu sefer link ile değilde import ile çağırıcaz.. Aynı şekilde HTML sayfamızda head taglarımızın arasına yazılır.. Örnek çağırım şekli aşağıdaki gibidir;
<style type="text/css">
@import url("style.css");
</style>
@import url("style.css");
</style>
Import ile çağırmakla link ile çağırmak arasındaki fark şudur;
@import ile çağırılan CSS dosyasını tarayıcılar daha önce yorumlarlar.. Örneğin bir reset.css dosyamız olduğunu düşünün (Bu konu kafanızı karıştırmasın ileriki derslerde daha ayrıntılı olarak değinicem) Bunu @import ile çağırabilirsiniz.. Diğer CSS dosyasını link ile çağırırsınız.. Bu sayede reset.css daha önce yorumlanmış olucaktır.
Birde ek olarak bir ayrıntı vericem;
Birden fazla CSS dosyanız olduğunu düşünün (Örn: 4 tane) Bu CSS dosyalarını tek tek HTML sayfamızda çağırmak yerine sadece bir CSS dosyasını çağırıp geri kalan CSS dosyalarınızda HTML sayfamızda çağırdığımız CSS dosyasında @import ile çağırabiliriz.. Bu sayede HTML sayfamızdada kuru kalabalıktan kurtulmuş oluruz.. Bunun içinde CSS dosyamızda aşağıdaki kodu uygulamalıyız;
@import url("sag.css");
@import url("sol.css");
@import url("orta.css");
@import url("sol.css");
@import url("orta.css");
Eğer bu durum karışık geldiyse videoyu izleyin.. Daha iyi anlayacaksınız videoda.