CSS Nedir ? Nasıl Kullanılır ? Ne İşe Yarar ?

Css nedir ? Açılımı Cascading Style Sheets (Basamaklı Stil Şablonları – Basamaklı Biçim Sayfaları) olan css bu kelimelerin baş harflerinden türetilmiştir. Css nedir ? Aynı zamanda bu sayfaların uzantısı da .css olarak yazılmaktadır. Html olarak oluşturduğumuz iskelet sayfaları css ile giydirebiliriz. Böylece görsel olarak çok daha zengin görünüme sahip web siteleri oluştururuz.  Çünkü html sayfasındaki bir linke, maddeye veya başlığa farklı bir görünüm özelliği vermek istediğimizde css kullanmamız gerekir.

Css ile bir Html elemanının kendi rengini, arkaplan rengini, boyutunu, fontunu ve daha birçok özelliği değiştirip özelleştirebiliriz. Böylece sadece bize özgü linkler, maddeler ve başlıklar oluşmasını sağlar. Eğer belli birer tarz geliştirirsek, yaptığımız sayfa hemen diğerleri arasından ayrılır.

Css‘in gelmesi Html‘in basma kalıptan çıkıp, özgürleşmesiydi. Standart başlıklar veya bağlantılar yerine, istediğimiz renkte, boyutta ve fontta başlık ve bağlantılılar yapabiliyor, tüm sayfayı kendimize göre dizayn edebiliyorduk. Css adeta Html‘in sınıf atlamasıydı.

Bir css yazmak için, bir html dokümanı oluşturmak  ve body kısmına etiket tanımlamak gerekir. Örnek bir  css dosyası aşağıdaki gibidir;

<html>
<head>

<style>
#tkutu{
    width: 300px; 
    height: 300px; 
    background-color: red;
}
</style>

</head>

<body>

    <div id="tkutu"></div>

</body>
</html>

Fakat sonuç olarak html olmadan css yazamayız. Bu yüzden css yazmak için en başta html öğrenmemiz gerekir. Html hakkında detaylı bilgi almak için linke tıklayabilirsiniz.

Css kodlarının html dosyasına bağlanması işlemi üç farklı şekilde yapılabilir.

1.HTML Dosyasına Bir .CSS Dokümanını Bağlama:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="dosya.css"> 
</head>
<body>
    <div>Html dokümanının bulunduğu yerde dosya.css dosyası varsa css özelliklerini bu sayfaya yansıtır.</div>
</body>
</html>

2.HTML Dosyasına CSS Yazma

<html>
<head>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>Bu yazı kırmızı olacaktır. Çünkü css ile dive bu renk atanmıştır. </div>
</body>
</html>

3.HTML Etiketine CSS Yazma

<html>
<head> 
</head>
<body>
    <div style="color:red;">Bu yazı kırmızı olacaktır. Çünkü etikete css yöntemi ile kırmızı renk atanmıştır.</div> 
</body> 
</html>

Css nedir ? Sorusunun cevabını vermeye çalıştık. Başka bir yazıda görüşmek üzere.

Bir cevap yazın