HTML’de CSS Stil Dosyaları

Hazır stil şablonları oluşturduğumuz HTML sayfalarının daha estetik görünmesi için kullanılır. Stil bilgilerini HTML sayfamızın içinde veya bir link yardımıyla sayfamızda kullanabiliriz.

<style type="text/css" rel="stylesheet">
<!--
      (Stiller burada verilir)
-->
   </style>

Eğer Stil dosyamızı bir link yardımıyla HTML‘e eklemek istiyorsak;

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

olarak belirtiriz. Farkındaysanız stil dosyamızın sonu .css ile bitiyor. Stil dosyaları ayrı olarak kullanılıyorsa .css olarak kayıt edilir.

Stil (CSS) kodlarını girmek

Stil belirlemek için formatımız basit olarak .stil_ismi { stiltanımlamaları:stil; } şeklindedir. Still class’ını class=”stil_ismi” olarak HTML kodlarımız içinde belirtiriz. Örneğin;

<a href="http://example.com" class="stil_ismi" >Tıklayın</a>

Class’ın nasıl html içinde gösterileceğini de böylece gördük.

stil_ismi tanımından önce kullandığımız nokta ilgili stilin o isimli tüm class tanımlamaları için geçerli olduğunu anlatır. Yukarıda bu class’ı table ‘ a da yazsak, body’e de yazsak aynı stili alırız. Başına HTML kodu koyduğumuzdaysa ilgili class sadece o nesneye özel olur. Bunu örneklerle pekiştirelim;

.fontrenk {
      font: 12px Tahoma, Verdana;
      color: #ccc;
   }
   table.fontrenk2 {
      font: 10px Tahoma, Verdana;
      color: red;
   }

Stillerimizi belirledik şimdi bunu html de kullanalım;

<a href="http://example.com" class="fontrenk" >Tıklayın</a>
<!-- Stil dosyası bu link e etki eder --> 
<a href="http://example.com" class="fontrenk2" >Tıklayın</a>
<!-- Stil dosyası bu link e etki etmez. Çünkü fontrenk2 table nesnesine özelleştirilmiştir. -->

Dikkat etmişseniz stil dosyalarını yazarken ozellik: deger; şeklinde yazıyoruz. Bu CSS’in genel yapısıdır. Şimdi çok kullanılan Stil özelliklerinin listesini aşağıdan inceleyelim.

HTML’i anlatırken CSS’e Giriş düzeyinde bir dersin daha sonuna geldik. Yukarıda gördüğümüz gibi herhangi bir koda class=”stil_ismi” özelliği eklersek ve css kodlarımızı sayfamızın uygun şekilde eklersek, ilgili nesne veya nesnelerle ilgili düzenlemeler gerçekleştirmiş oluruz.

En basit anlatımla CSS’in nasıl çalışacağını öğrendik. Bu başlangıç düzeyinde bir dersti. Daha fazla kafa karıştırmadan bu konuyu burada bitirmek giriş dersi için oldukça yerinde olacaktır. Şimdilik Sağlıcakla Kalın.