CSS yazmanın belli başlı kuralları vardır fakat bunlar öğrenilmesi zor kurallar değil. Bir yerden başlayalım.

Temeller

Öncelikle bir class tanımlıyoruz. Bu sınıfları daha sonra html içinde kullanacağız. Bizim tanımladığımız sınıf(class)ın adı yazi olsun. Tanımlamalarımızda Türkçe karakterler kullanmıyoruz. Tanımladığımız yazi sınıfının başına bir nokta koyuyoruz ve sonuna da süslü parantez açıp kapatıyoruz. Yazmak istediğimiz kodları da bu süslü parantezlerin içine yazıyoruz. Parantezlerin içine yazdığımız kodları da noktalı virgüllerle ayırıyoruz. Daha doğrusu noktalı virgül ile o kodu kapatıyoruz. Hiçbir şey anlamadıysanız sorun değil, hemen bir örnekle açıklayayım.

.yazi {
font-size: 11px;
font-family: Tahoma;
}

yazi sınıfımız hazır. Peki bunu nasıl kullanacağız?

Hazırladığımız sınıfları kullanabilmek çok basit. HTML tagimizin içine class=”yazi” yazacağız. Hemen bir örnekle açıklayayım.

<div class="yazi">İçeriğimiz burada.</div>

Bu örnekte div etiketi içine yazdığınız yazılar, az önce tanımladığımız yazi sınıfındaki gibi 11px boyutunda ve Tahoma yazı tipiyle yazılacak. Aslında bu şu demek:

<div style="font-size: 11px; font-family: Tahoma;"></div>

Dilerseniz böyle de kullanabilirsiniz. Fakat böyle kullandığınızda, kodları düzeltmeniz gerektiğinde bütün sayfaları tek tek düzenlemeniz gerekir. Sınıflarla çalıştığınızda css dosyanızdan kodu düzenleyip kaydedersiniz bütün sayfalara etki eder.

Burada CSS’in nasıl yazıldığını ve kullanıldığını gördük. CSS’in temelleri bundan ibaret. Şimdi biraz ileri aşamalara geçelim.

Yazinin devamini oku »

CSS (Cascading Style Sheets yani geçişli stil sayfaları), html, php gibi diller ile birlikte, stil sayfaları yapmak için kullanılır. Yazıların rengini belirlemek, renkli sayfalar yapmak, bir linkin üzerine gelince alacağı rengi ayarlamak gibi görünümü güzelleştirmek için kullanılır.

CSS dosyası nasıl çekilir?

Bir stil dosyası oluşturursunuz ve bu stil dosyanızı CSS’i kullanacağınız sayfaya çektirirsiniz. Bunu birkaç yöntemle yapabilirsiniz.

1. <link rel="StyleSheet" href="stil.css" type="text/css" />

   Üstteki kodu html sayfanızda head etiketleri arasına eklemelisiniz.

2. <style type="text/css">
   @import "stil.css";
   </style>

   ya da

   <style type="text/css">
   @import url("stil.css");
   </style>

   Üstteki kodları da html sayfanızda arasına eklemelisiniz.

Bu iki yöntemi, hazırladığınız css dosyasını sayfanıza çekmek için kullanabilirsiniz. Eğer birkaç tane stil dosyanız varsa kodları çoğaltabilirsiniz.

<style type="text/css">
@import url("stil1.css");
@import url("stil2.css");
@import url("stil3.css");
</style>

<link rel="StyleSheet" href="stil1.css" type="text/css" />
<link rel="StyleSheet" href="stil2.css" type="text/css" />
<link rel="StyleSheet" href="stil3.css" type="text/css" />

CSS nasıl yazılır?

CSS yazmanın belli başlı kuralları vardır. Bu konuyu bir dahaki derste açıklayacağım.