Bir web sayfası hazırlamaya başlarken ilk aklımıza gelecek şeylerden biri grafikleri ve tabloları şekillendirmeden önce kullanacağınız renkler ve renklerin uyumudur.

Renklerden kastımız her zaman içni kullanılan büyük nesnelerden çok yazılardaki tipografi uyumu, yazıların rengi, bağlantıların rengi ve onların kullanıldığı alanların rengidir.

Bir web sayfasında hiç bir resim, animasyon kullanmasanız dahi başarılı renk ve yazı çalışmaları ile güzel bir sonuç ortaya çıkartabilirsiniz.

Başarılı renk ve yazı uygulamaları için HTML kullanımını çok iyi bilmeniz ve bununda yanında CSS konusunda bilginiz olması gerekmektedir. HTML konusunda Göktuğ İçöz’ün yazdığı ve Web Tasarım’a Giriş seminerinde anlattığı Temel HTML bölümünü okuyabilirsiniz.

CSS Nedir?

CSS (ing) – Cascading Style Sheets Kısaca CSS’i sayfaya şeklini veren ve düzene sokulmasını sağlayan kodlar yığını olarak algılayabiliriz.

CSS telafuz bakımından şiveye bağlıdır. SiEsEs şeklinde okunduğu gibi (ki genellemede doğrusu budur) CeSeSe veya CiEsEs diye okunduğuda olabilir. Bu tanımlamalar arasında doğrusu SiEsEs şeklinde okunan ve söylenendir.

CSS kodları 3 şekilde kullanılabilir.

Dilenirse temel html sayfası içerisinde

<style></style>

tagları arasında,

Özel html tagları arasında

<table cellspacing="0" cellpadding="0" style="border:1px solid #cccccc;" >

Ya da daha düzenli olması açasından ayrı bir dosyada.

style.css

Anlatacağımız örnek ve uygulamalarda hep ayrı dosyayı baz alacağız.

CSS dosyasını hazırlamak için ekstra programlama ihtiyaç duymamaktayız. Yani CSS dosyanızı herhangi bir metin editörü ile (Notepad, Notepad2, Notepad+, EditPlus) hazırlayabilirsiniz.

Browserınızın CSS dosyasını tanıması için tek yapmanız gereken hazırladığınız CSS dosyasının uzantısının .css olması gerekmektedir. Örnek verecek olursak ; kaydedeceğimiz dosya arman.css şeklinde kaydedilmelidir.

Bir CSS dosyası içerisinde tanımlamalar küme parantezi ile { başlar ve küme parantezi kapatma ile } kapanır. Örnek;

body etiketi

Body { text-align:left; }

Yukarıda örnekte gördüğünüz gibi Body tagı için tanımlayacağımız stilleri küme parantezi içerisine aldık. Küme parantezi içerisinde yapacağımız tanımlamaların sıralamasınıda

ÖZELLİK: (ikinokta üstüste) DEĞER ; (noktalı virgül)

Şeklinde yazabiliyoruz. Yukarıda belirttiğimiz TANIM kısmı vereceğimiz özellik (yazı, renk, arkaplan v.b), DEĞER olarak tanımladığımız yer ise belirttiğimiz özellik için alacağı değerdir. (Renk kodu, arka plana dresi, sağ, sol v.b)

Bir tag için belirteceğimiz özellik birden fazla ise her özelliği belirttikten sonra ; (noktalı virgül) kullanmak zorundasınız. Bu sayede kullanılan tarayıcı o özelliğin bittiğini ve tag için ikinci özelliğin olduğunu anlayıp onuda işleme koyacaktır.

NOT : CSS’in de kendine özgü bir yazım stili bulunmaktadır. Bir çok programlama dilinde olduğu gibi CSS’de bu yazım kurallarına uygun yazılmalıdır. CSS Validation ile ilgili kısımlara ilerde değineceğiz)

Vereceğimiz stil değerleri için bazı ön tanımlamaları bilmek gerekmektedir.

(.), (#) ve ().

. (nokta) tag içinde vereceğimiz stilin CLASS etiketine sahip olduğunu belirtir. HTML kodlarımız içerisinde <span class="STYLE">Merhaba</span> şeklinde class etiketinde yaptığımız STYLE tanımlamasının CSS kodları içerisindeki karşılığı .STYLE şeklindedir. Örnek verecek olursak;

.STYLE { color:#ff6600; letter-spacing:1px; }

(diyez # ) tag içinde vereğimiz stilin ID etiketine sahip olduğunu belirtir. HTML kodlarımız içerisinde

<span id="STYLE">Merhaba</span> 

şeklinde id etiketine yaptığımız STYLE tanımlamasının CSS kodları içerisindeki karşılığı ise#STYLE şeklindedir. Örnek verecek olursak;

<->#STYLE { color:#ff6600; letter-spacing:1px; }

Bu noktada unutmamanız gereken bir bölüm var. Bu da id ile class arasındaki farktır. Aynı class etiketini 1’den çok taga tanımlayabilirken , ID etiketini o sayfa içerisinde sadece bir tane taga tanımlayabilirsiniz. Birden fazla tag a id tanımlaması sorunsuz çalışacağı halde ilerde bahsedeceğimiz gibi CSS Validation olayında geçmeyecek ve sayfamız onay alamayacaktır.

Birde nokta veya diyez kullanmadan yapılabilen CSS tanımlamaları mevcuttur. Bunlar direkt tagın adını belirtmek koşulu ile kullanılır ve o sayfa içerisindeki o taga sahip heryeri etkilerler.

Body , a , img, input bunlardan bazılarıdır. Örnek verecek olursak

a { color:#ff6666; text-decoration:none; font-weight:bold; }

Bu kodu kullandığımız zaman hiç bir class veya id vermediğimiz a (bağlantı) taglarının hepsinin rengi kırmızı altı çizgisiz ve kalın olacaklardır.

Sıfırdan bir HTML dosyası ve CSS dosyası yaratalım. Bu iki dosyayı bir birlerine tanıtalım. Düzenli olması açısından beni yeni bir klasör açıyorum ve projemin adına Arman adını veriyorum. Arman klasörünün altına css, img diye iki tane daha klasör açıyorum. CSS dosyalarımı (bir sayfa içerisinde birden fazla css dosyası kullanabilirsiniz. Fakat aynı özellikleri belirtemezsiniz) CSS klasörüne, imajlarımı img klasöründe saklayacağım.

Ön Hatırlatma, HTML oluşturmak ve temel html bilgisine sahip olmak için Göktuğ (İçöz)’ün hazırladığı Temel HTML adlı dökümanı okuyabilirsiniz. http://blog.goktug.biz/index.php/19-temel-html.html

Dökümanı okuduğunuzu farzederek devam ediyorum. Yani Temel HTML bilgisine sahip olduğunuzu düşünüyorum.

Hazırlayacağımız CSS dosyasını bu sayfaya tanıtmak için yazmamız gereken kod ise şu şekilde.

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

Bu kodu head /head taglarımız arasına koyuyoruz ve artık HTML dosyamız ve CSS dosyamızı birbiri ile tanıştırmış oluyoruz.

CSS dosyamızda yapacağımız işlemler artık HTML dosyamızı etkilemeye başlayacaktır.

Peki madem CSS dosyamızı hazırladık. Artık CSS ile stillerimizi oluşturmaya hazırız. Peki hangi objeye hangi özelliği hangi değeri vermemiz gerekiyor. Bu kısmı dikkatli takip etmeniz gerekiyor. Çünkü CSS’in en can alıcı noktası bu kısım.

Öncelikle belirtmekte fayda var. CSS ile HTML sayfanız içerisinde her dosyaya müdahale edebiliriz. Bir imaj’dan tabloya kadar heyşere müdahale etme şansımız bulunuyor. Bu demektirki sayfa içerisindeki tüm objelerimizi CSS ile şekillendirebiliriz. Yani bir resime kenarlar vereceğimiz zaman bunu resimden değilde css den vererek hem işimizi hızlandırabilir hemde renk değişikliği yapacağımız zaman bir grafik editörüne ihtiyaç duymayız. Artık bu kısma giriş yapıp öğrenme vaktimiz geldi.

Başlangıç olarak CSS i nasıl yazabileceğimizi yani CSS’in SYNTAX’ını öğrenmemiz gerekiyor.Syntax : Bir programlama dilinde kodlamanın uyması gereken kurallar dizisi, yazım şekli

TAG { özellik:değer;} ilk başta bilmemiz gereken standart cümlemin başında belirttiğim şekilde. Yani hangi tag e stil tanımlaması yapacaksak onu belirtiyoruz. Arından küme parantezimizi açıp vereceğimiz özelliği belirtiyoruz ve ikinokta üst üste kullanarak değerini belirtiyoruz. Çoklu özellikleri birbirinden noktalı virgül ile ayırıyoruz.

Tek Özellik

Body { background: #333333   } 

Birden Fazla ÖzellikBody

background: #333333; font-size:11px; letter-spacing:1px } 

Gruplama Özelliği

Body, html, p, a { font-size:10px; color: #ff6600  }

Gruplama özelliği sayesinde tagları birbirinden virgül ile ayırıp aynı özellikleri bir çok kez yazmaktan kurtulabilirsiniz.

Css kodunuzu tek satır yazmak zorunda değilsiniz. Örnek vermek gerekirse ;

Body   {Text-align:left;Font-size:11px;Color:#ff6600 }

Yukarıdaki kodumuz da sorunsuz çalışacaktır.

CSS dosyanızı hazırlarken unutmamanız gereken birkaç tane önemli nokta vardır. Bu noktalara dikkat emeyip bir çok kez sinir krizleri geçirebilir hatanızı düzelttiğiniz zaman ise bu hataya nasıl düştüğünüz konusunda kendinize kızabilirsiniz.

CSS tanımlamaları kesinlikle SAYI ile başlayamaz. Class değeri ve ID değeri içinde bu geçerlidir. Bu özellik internet explorer için önemsizken günümüzün yaygın tarayıcısı firefox için önem arzetmektedir.Örnek vermek gerekirse ;

.Haber { text-align:left; position:absolute; z-index:5;  } 

Yukarıdaki Haber tanımlamamız için yazdığımız kod doğru iken

.1Haber { text-align:left; position:absolute; z-index:5; } 

Tanımlaması doğru olduğu halde internet explorerda çalışacak fakat firefoxda çalışmayacaktır. Kodlarınızın doğruluğu ve w3c standartları açısından birinci örneğimiz şeklinde kodlarınızı yazmanız doğru olacaktır.

Bölüm 2 de belirttiğimiz bir özellik vardı. Class ve id değerlerinin dışında komple sayfayı etkileyecek taglara da stil tanımlayabiliyorduk. Hatırlatmak gerekirse bunlardan bazıları; h1, h2, h3, span, body, html, input…

Bu taglardan bazıları kendi içerisinde özelliklere ayrılı ve bunlarında bir anda aynı stile sahip olmalarını isteyebilirsiniz. Bunun en güzel örneği form verileri için kullandığımız input tagıdır.

Input tagı type="" değeri ile radio buton, checkbox, textbox, buton v.b değerler alarak şekillenir. Normalde bir etiketi komple etkilemesi için CSS kodumuzu

input { background:#ff6600;  } 

şeklinde yazıyorduk. Peki input tagına bağlı olan tüm textboxlara tek bir stil tanımlamak istersek ne gibi bir yol izlememiz gerekiyor?

input[type="text"]  { background:#ff6600; } 

Yukarıda belirttiğimiz kodda dikkatinizi çekmesi gereken 2 bölüm var. Birincisi sabit tagımızı belirttik. İnput olarak tanımlamamızı yaptık.

Ardından köşeli parantez ile html kodlarımız içerisinde type="" ile belirttiğimiz form değerimizi yani text, checkbox v.b değerimizi belirtiyoruz.

Ve kodumuzun devamında normal cssimizi yazmaya devam ediyoruz.