İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır
Zafer Teker
tekzaf@yahoo.com

CSS'in Anlam ve Önemi

CSS'in Anlam ve Önemi

Bu başlığı görünce "Malazgrit savaşının anlam ve önemi", "Çanakkale Savaşının Anlam ve Önemi" yazılarına benzer ciddi bir yazı yazacağımı düşünebilirsiniz. Haklısınız zaten ciddi bir yazı yazmak niyetindeyim. Çünkü şu anda CSS, Malazgrit savaşından çok daha anlamlı ve önemli. Çünkü bugün CSS web sayfalarının vaz geçilmez bir parçası durumundadır. Bugün insanlar web sayfası olmadığı zaman suçlanabilir ancak Malazgrit savaşının ehemmiyetini farketmediği için suçlanamaz.

Şu anda internetteki tüm sitelerde CSS kullanılmaktadır. CSS bilmeyen bir web tasarımcısı düşünülemez. Peki nedir CSS'yi bu kadar anlamlı ve önemli kılan? Bu yazıda bu konu incelenecektir.

Elvada Font Element'i

HTML'de yazılara bir biçim vermek istediğinizde (renk,boy vs..) genellikle font element'i kullanılıyordu. Örneğin siz bir yazının rengini kırmızı yapacaksınız. Bunu

<font color=red>kırmızı yazı</font>

şeklinde yapabilirsiniz. Burada bir sorun yok. Bir yazının rengini kırmızı yapmak kolay bir iş. Peki size patron "sitemdeki tüm h1 başlıklarının renginin kırmızı olmasını istiyorum" derse ne yapacaksınız. Her h1 element'leri için font element'inin kullanılması gerekir.

<font color=red><h1>kırmızı başlık</h1></font>

Diyelim sitenizde 100 h1 başlığı var. O halde 100 tane font element'i olacaktır. Tamam diyelim çalışkan ve sabırlı bir insansınız ve her h1 geçtiğinde font element'ini kullandınız. Günlerden bir gün patronunuz karar değiştirdi ve sizden başlıkların rengini yeşil yapmanızı istedi. Artık h1 ile kullanılan tüm font element'lerinin color attribute'sinin red değerini silip green değerini koymanız gerekiyor. Bu işlemi tam 100 kere yapmanız gerekir. Bu işlemi yaptıktan sonra patronunuzun bir daha fikir değiştirmemesi için dua etmenizden başka çareniz yoktur. İşte bu tür dualarının sayısı o kadar fazlalaşmıştır ki sonunda dualar kabul olmuş ve CSS gönderilmiştir.

Yukarıdaki sorunu CSS nasıl çözmektedir. Bu işlem basittir. h1 element'inin kendisini 1 kere biçimlendirirsin. Böylece h1 her geçtiğinde aynı stil kullanılır. Yapacağın head element'i içine aşağıdaki kodu eklemek

<style>
	h1{
		color:green;
	}
</style>

Böylece sayfada geçen tüm h1 başlıklarının rengi kırmızı olacaktır. Dün rüyasında gördüğü ak sakallı dedenin "başlıkları sarı yap ki murada eresin" şeklindeki demecinden sonra sabah işe gelen patronunuz sizden başlıkları sarı yapmanızı isteyebilir. Olsun artık işiniz kolaydır. Yukarıdaki color:green satırındaki green yerine yellow yazmanız yeterlidir. Artık dualarınız kabul olmuştur.

Yukarıdaki örnekte bir sayfadaki tüm h1'lere aynı biçim verilmektedir. Tüm sitenizde h1'in renginin aynı olmasını istiyorsanız ne olacak. Bu işlem de CSS ile çok kolaydır.

h1{
	color:green;
}

yazısını uzantısı css olan bir dosyaya kaydedersin. Daha sonra tüm sayfalara bu css'i bağlarsın. Bağlamak için head element'inin içine aşağıdaki element'i eklersiniz. Böylece test.css dosyasındaki tüm stiller kullanılabilir.

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

Artık güç sizdedir. Sadece test.css dosyasındaki green ifadesini yellow yapmanız yeterlidir. Böylece tüm site değişecektir.

Patron: Daha Ölmedik !

Patron'dan sadece bu şekilde kurtulabileceğinizi zannediyorsanız yanılıyorsunuz. Patron'lar bu konularda kolay kolay pes etmezler. Örneğin patronunuz sizden şunu istedi: "Haber yazılarının başlıklarının renginin kırmızı, köşe yazılarınının başlıklarının renginin mavi olmasını istiyorum. İki başlık içinde h1 element'i kullanılacak." Ancak bir h1 ya mavi olur yada kırmızı. Peki ne olacak şimdi. Merak etmeyin CSS'de bunun içinde çözüm var.

Yukarıdaki örnekte h1 element'inin biçimini ayarlamıştık. Onun yerine biz bir isim vererek bir biçim yaratalım ve bu biçimi istediğimiz element'le kullanalım. Bunun için aşağıdaki stilleri test.css'e koyalım

.news{
	color:red;
}
.article{
	color:mavi;
}

Burada .news haber başlıkları için hazırladığımız class'tır. .article ise köşe yazarlarının makalelerin başlıkları için hazırlağımız bir class'tır. Görüldüğü gibi class'lar da bir element ismi yok. İstediğimiz element'e uygulayabiliriz. Bunu şu şekilde kullanırız.

<h1 class="news">Bu Haber Başlığı</h1>
<h1 class="article">Bu Köşe Yazısı Başlığı</h1>

Artık patronun istediğini yaptık. Patron yok ben haber başlıklarının rengini yellow istiyorum derse işinin kolaydır. .article class'ını değiştirmeniz yeterlidir. Tüm başlıklar değişecektir. Yukarıdaki örnekler sonucunda CSS belkide en önemli yararını görmüş olduk. Yaratılan bir biçim istenildiği yerde, istenildiği kadar kullanılabilir. Ve daha sonra bu biçimi değiştirdiğinizde uygulandığı tüm element'lerin biçimide değişmiş olur. Bu işlemleri HTML ile yapmanız imkansızdır.

Patron'nun Karısı

Patronunuzu CSS ile yıldırdınız. Ancak patronunuzun bir de karısı var ve patrondan daha dikkatli ve tehlikeli. Akşam yemeği sırasında Tulin hanım (patronunuzun karısı) kocasına "Siteniz çok güzel olmuş ancak başlıkların boyları biraz büyük olmuş" şeklinde cümle kullanmış. Bunun sonucu olarak sabah sizden tüm başlıkların boylarını küçültmeniz isteniyor. Bu işlem çok kolaydır. Birden fazla seçeneğiniz var. .news ve .article class'larının yanına aşağıdaki stili ekleyebilirsiniz.

h1{
	font-size:10pt;
}

Böylece tüm h1 element'lerinin boyu 10pt yapılmış olur. h1 element'ini hem kendi stili var hem de başka bir class'ı kullanıyor. Diğer bir yöntemde hem .article'a hem de .news'e font-size:10pt; satırını ekleyebilirsiniz. Bunun yararı her iki başlığın farklı boy olmasını sağlayabilmenizdir. Ancak 10pt'yu 8pt yapmak için iki yerde de değişiklik yapmanız gerekir. Hangi biçimlerinin tüm başlıklarda olması gerektiği , veya o class'a özgü olduğu kararını siz vereceksiniz. Başlığın boyu tüm sitede aynı olur diyoranız h1 element'ini 10 pt yapın.

Ancak Tulin hanım aynı yemekte başka bir cümle kullanmıştır. "Sitenizin kadın ve toplum bölümündeki haber ve köşe yazısı başlıklarının renginin yellow olmasını istiyorum ". Yani tüm sitede haber ve makale başlıklarının rengi red ve green ancak kadın ve toplum bölümünde başlıklar sarı olacak. İşte kazık bir soru.

Bir element için stil yarattık, yarattığımız bir stili istediğimiz element için ve istediğimiz zaman kullanmayı becerdik. İyi de bir element şu sayfadaysa şu stil, bu sayfada ise bu stil nasıl deriz. Önemli bir mesele. Duruma göre stil vermek. Bu sorunu birden fazla yöntemle çözebilirsiniz. İlk basit çözüm test.css dosyasını kadın ve toplum sayfalarında bağlamamaktır. test.css dosyası yerine yeni bir womentest.css dosyası yaratır ve bu dosyayı bağlarız. Bu womentest.css dosyasında istediğimiz renk ayarlarını yaparız. Böylece kadın ve toplum sayfalarında istediğimiz farklı renkler gözükür. Ancak bu yöntem kötü bir yöntemdir. Çünkü tüm sitede ortak olan stiller hem test.css'ye hem de women.css'ye yazılması gerekir.

Diğer bir çözüm ayrı bir css dosyası yapmak yerine kadın ve toplum bölümünün sayfalarında aşağıdaki style element'ini kullanmaktır.

<style>
.news,.article{
	color:yellow;
}
</style>

Burada şu sorulabilir. Hem test.css dosyasında .news ve .article için bir renk veriyoruz. Hem de style etiketi içinde. Hangisinin dediği olacak. test.css bağlamamak gibi bir şey yapılamaz çünkü bu dosyada ortak bir çok stil bulunmaktadır. Hemen söyleyelim ki kadın ve toplum bölümündeki sayfalarda başlıklar sarı olacaktır. Çünkü CSS'de style etiketinin içinde geçenler daha önceliklidir. Böylece bu style etiketini tüm kadın ve toplum sayfalarına ekleyerek istenilen yapılmış olur. Ancak burada tüm kadın ve toplum sayfalarına style etiketini kopyalanması gerekir ki bir değişiklik yapıldığında tüm sayfalardaki stiller değiştirilmesi gerekir. Bu da çok zaman alır. Daha iyi bir çözüm şudur: womentest.css dosyası yaratılır ve yanlızca aşağıdaki stiller bu sayfaya konur.

.news,.article{
	color:yellow;
}

Tüm kadın ve toplum sayfalarında önce test.css bağlanır. Daha sonra womenttest.css dosyası bağlanır. Eğer womentest.css dosyası daha sonra bağlanırsa womentest.css içindekiler daha öncelikli uygulanır ve başlıklar yellow olur. Diğer stillerde test.css dosyasından uygulanırlar. Böylece tüm kadın ve toplum sayfalarında test.css'den sonra womenttest.css bağlanırsa istenilen yapılmış olur. Burada sıranın önemli olduğu unutulmamalıdır.

Özet olarak genel biçimleri bir dosyaya yaz ve o dosyayı tüm sayfalarda bağla. Bazı genel stilleri bir sayfada daha değişik biçimde kullanmak istiyorsan o stilleri ayrı bir dosyaya koy ve genel css dosyasından sonra sayfaya bağla. Böylece tüm genel stilleri kullanabilir ayrıca sayfaya özgü stilleri de kullanmış olursun.

Yukarıdaki örnekte bir stil şu sayfada ise şöyle bu sayfada ise şöyle davransın sorununun bir çözümüdür. Peki aynı sayfada bir element'i durumuna göre biçimlendirmek için ne yapmamız gerekir. Örneğin bir paragraf haber yazısı ise rengi siyah, eğer köşe yazısı ise renginin gri olması için ne yapmamız gerekir. (Her sorunu patronlar çıkarmaz. Bu sorunda benim aklıma geldi)

Bunun için şu yapılabilir.

.news,.article{
	color:yellow;
}
.newsP{
	color:black;
}
.articleP{
	color:gray;
}

Burada paragraf için iki ayrı class yaratılmıştır. Haber paragrafları için newsP class'ını, köşe yazıları için articleP class'ı kullanılmalıdır. Ancak bunun zor tarafı hem h1 kullanıldığında class="news" yazmak hem de p kullanıldığında class="newsP" kullanmaktır. Bunun yerine bir div etiketi kullanmak ve bu etikete class olarak .news veya .article class'larından birini vermek daha iyi bir çözüm gibi durmaktadır. Böylece div içine konulacak tüm element'ler kullanılan class'a göre biçimlendirilebilirler. Örnek kullanım şu şekilde olur.

<div class="article">
	<h1>article başlığı</h1>
	<p>article paragrafi.....</p>
</div>

Stil ise şu şekilde verilir.

.news,.article{
	color:yellow;
}
.news p{
	color:black;
}
.article p{
	color:gray;
}

Buradaki stillerde .news p ve .article p ifadelerine dikkat edilmelidir. Bu şu anlama gelir ki eğer bir p element'i .news class'lı bir element'in içinde ise rengi siyah, eğer .article class'lı element'in içinde ise rengi gri olur. Bu şekilde her h1 veya p geçişinde class yazmak işleminden kurtulunur. Buna benzer olarak örneğin article içindeki linklerin renginin kırmızı olmasını istiyorsanız

.articel a{
	color:red;
} 

stili eklemeniz gereklidir. Bundan böyle articel class'lı element'lerin içindeki linkler kırmızı gözükecektir.

Buraya kadar ki örneklerde CSS'nin ne kadar önemli olduğunu anlamışsınızdır. CSS'in bunlardan başka burada sayamadığımız bir çok önemli özellikleri vardır. Ancak yukarıdaki işlemler sonucu şu yararları öğrenmiş olduk.

Buraya kadar ki örneklerde CSS'nin biçimlendirme zenginliğinden bahsedilmemiştir. CSS çok sayıda zengin bir biçimlendirme hizmeti vermektedir. Biz örneklerimiz boyunca sadece color ve font-size özelliklerini kullandık. Ancak CSS çok sayıda özellik vardır ve yukarıda bahsedilenler tüm özellikler için uygulanabilir.

Web tasarımcımızın patron ve karısı ile mücadelesinden CSS'in ne kadar önemli ve yararlı olduğunu anlamışsınızdır. CSS'i anlamak ve iyi derecede kullanmak bugün web tasarımcılarına çok büyük bir güç sağlamıştır.

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır