Css’e Giriş – Css Dersleri 1

Merhaba arkadaşlar ;

Bu paylaşımımda sizlere temel teşkil etmesi bakımından Css hakkında kısa bir ön bilgi vermek istiyorum.Bundan sonraki Css paylaşımlarımda daha ayrıntıları konulara değineceğim için böyle bir giriş yapmak istedim.Aslında amacım blog üzerinden sade ve faydalı bir kaynak oluşturup,bilmeyenlerede en azından Css‘in tam olarak ne işe yaradığını ve az da olsa css kullanımını öğretmektir.

İlk olarak Css nedir bunun tanımını yapalım.
Css’in açılımı Cascading Style Sheets’tir.Yani Stil Şablonları.
Peki bu ne demek diyecek olursanız web tasarımıyla uğraşan arkadaşlar bilirler ki Css kullanımı başlamadan önce tasarımlarımızda belirlediğimiz her eleman için ayrı renk tanımlamaları gibi özellikler belirlerdik ve teker teker her element için uğraşırdık.Css’in kullanımı işte burda devreye giriyor.
Artık eskisi gibi her element için ayrı ayrı özellikler tanımlamaktansa bu özellikleri bir kere stil dosyamızda tanımlayarak sayfamıza dahil edebiliriz.

Eski sisteme bir örnek vermek gerekirse çok sayfalı bir tasarımımız var ve her sayfadaki başlıkları tek tek düzenliyoruz.Harcadığımız zamanın haddi hesabı yoktur.Fakat css yardımıyla h1 olarak tanımladığımız başlık yapılarına bir defaya mahsus özellik tanımlamalarını yaparak diğer sayfalardaki h1 taglarının mevcut olduğu başlıklarıda bu kod sayesinde düzenleyebilir,1 satır kod değiştirerek hepsinin özelliğine ulaşabiliriz.

Örnek vericek olursak başlıklarda SEO açısından etkili olduğunu bildiğimiz h1 etiketine belli stil tanımlamaları yapmak istiyoruz,yapmamız gereken style.css sayfamızda h1 tagı altında bir class belirleyip gerekli özellikleri girmek;

h1 {
color: #FF0000;
font: 15px Verdana;
text-decoration: underline;
padding-left:3px;
}

Yukarıdaki gibi bir tanımlama yaptığımızda h1 tagı yani başlıklarımızın görüntüsü kırmızı renkte,15px büyüklüğünde Verdana fontuyla belirlenmiş,altı çizgili ve soldan 3px boşluk bırakılarak yazılmış bir başlık olucaktır.Bu şekilde Css’in bize sağladığı kolaylığı anlayabiliriz.

Farklı farklı başlıklara tek satırla özellikte tanımlayabiliriz.
Mesela ben konumda bir anabaşlık ve ayrıca yazımın içindede ayrı ayrı alt başlıklar belirliyorum ve bunların hepsine tek tek özellik tanımlamak yerine Css yardımıyla stil ayarlamalarını yapıp farklı özellikler belirleyebilirim,Örnek vericek olursak;

h1 {
 color: #FF0000;
 font: 15px Verdana;
 }

h2,h3 {
 color: #EEEEEE;
 font: 13px Verdana;
 }

h4{
 color: #000000;
 font:11px;
 }

Bu şekilde h1 ve h4 taglarının kendine ait farklı özellikleri olucaktır fakat h2 ve h3 başlıkları birbiriyle aynı özellikleri taşıyacaktır.Bu şekilde birden fazla elementede müdahele edebilir,gerekli özellikleri atayabiliriz.

CSS sadece başlıklar için değil web tasarımında kullanılan her objenin görseline müdahele etme kolaylığı sağlayan bir sistemdir.

Giriş olarak bu kadar bilginin yeterli olduğunu düşünüyorum,Bundan sonraki yazımda sizlere Css’i sayfalarımıza nasıl ekleyeceğimizden ve Css’in yapısından bahsediceğim.

Görüşmek üzere…