Bir HTML sayfasında yazılar, resimler, linkler ya da benzeri bir çok içerik gösterebilirsiniz. Peki bunların nasıl görünmesini ya da nasıl davranmasını istediğinizi neyle belirlersiniz? İşte bu CSS Nedir? sorusunun cevabıdır. Vikipedia’da yapılan tanıma göre
Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir.
Vikipedi
Ancak ben yine kendi tanımımı yapmayı tercih ederim. CSS HTML’in makyajıdır. 🙂
Burada makyaj deyince amacın yalnızca sayfayı güzel göstermek olduğunu düşünmeyin. Estetiğin yanı sıra sayfaların belirli bir düzeninin ve tutarlılığının olması, kullanıcı deneyiminin artırılması yani sayfanızdaki bilgilerin ziyaretçilere daha anlamlı ve okunabilir olarak sunulması gibi bir çok olanak sunduğunu söyleyebiliriz.
Her zaman olduğu gibi öğrenmeye işin mantığı ile başlayalım. Onlarca hatta yüzlerce sayfadan oluşan bir web siteniz olduğunu düşünün. Her sayfada resimler, yazılar vb. içerikler olsun. Bunların hepsinin belirli bir biçimde ve düzende olması gerekir. İşte bu düzeni sağlamak için web sitenize CSS kodları eklemeniz yeterli olacaktır.
Peki Nasıl Yapılır?
CSS kodlarınızı sayfaya üç şekilde ekleyebilirsiniz.
1- HTML elementi olarak eklemek
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
<style>
[css kodları]
</style>
</head>
<body>
[html kodları]
</body>
</html>2- CSS dosyasını dışarıdan çağırmak
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
<link href="/dosyayolu/style.css" />
</head>
<body>
[html kodları]
</body>
</html>3- HTML attribute olarak eklemek
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<h1 style="[css kodları]">Yazı Başlığı</h1>
</body>
</html>3. adımda yazılan CSS kodları yalnızca eklenen eleman için geçerli olacaktır.
Gelelim CSS Kodlarını Yazmaya
Bu işlem iki aşamadan oluşur. Birinci ve en önemli adım seçme işlemidir. Aslına bakarsanız seçme konusunu iyi kavrarsanız CSS’i öğrendiniz demektir. Öncelikle sayfadaki hangi elementleri biçimlendireceğimizi seçerek başlarız. Sonrasında ise seçtiğimiz elementlerin belirli özellikleri için belirli değerler atarız. Örneğin sayfada tüm başlıkların kırmızı renkte olmasını isterseniz bunu aşağıdaki şekilde yapabilirsiniz.
h1 {
color: red;
}Bu kod yapısını (başka bir deyişle CSS’in Syntax’ını) incelediğimizde “h1” sayfadaki html elementini ifade eder. Yani bizim seçicimizdir. Herhangi bir ayırıcı özellik belirtmediğimiz için sayfadaki tüm h1 elemanları için geçerli olacaktır. Daha sonra { … } yapısı içinde özellik: değer; şeklinde bu elementin hangi özelliğine hangi değeri vereceğimizi belirtiriz. Şunu da unutmamak gerekir ki bu bir işaretleme dili olduğu için verebileceğimiz özellikler standarttır. Ancak değerler her zaman standart olmayabilir. Örneğin renk değeri için bolca seçeneğiniz mevcut.
Peki biz sayfadaki tüm başlıkları değil de belirli olanları seçmek istersek ne yapmamız gerekir? Bu durumda seçme işlemini biraz daha özelleştirmemiz gerekecektir. Örneğin yukarıdaki kodu şu şekilde değiştirelim.
div h1 {
color: red;
}Bu durumda yalnızca div elementlerinin içinde yer alan h1 elementlerinin rengi kırmızı olacaktır.
class ve id seçicileri
Buraya kadar her şey yolunda. Peki hiçbir şarta bağlı olmadan yalnızca bizim istediğimiz h1 elemanlarının kırmızı renkte olmasını istersek? Neyse ki CSS buna da müsaade ediyor. Bu durumda yapacağımız işlem ise basit. Önce bu elemanları gruplandırıp sonra kolayca seçebiliriz.
HTML attribute’lerinden en çok kullanılan class tam da bunun içindir. Şimdi sırasıyla aşağıdaki HTML ve CSS kodlarını inceleyelim.
<p class="mavi">Birinci paragraf</p>
<p>İkinci paragraf</p>
<span class="mavi">Üçüncü yazı</span>Burada en baştaki p elementine ve en sondaki span elementine “mavi” class’ını vererek bunları gruplamış olduk. sonra da CSS kodlarını yazalım.
.mavi {
color: blue;
}class seçicisi “.” işareti ile ifade edilir. Bu durumda yukarıdaki koda göre “mavi” class’ına sahip olan her elementin yazı rengi mavi olacaktır. Ancak kodu aşağıdaki şekilde değiştirirsek;
p.mavi {
color: blue;
}Bu durumda yalnızca “mavi” class’ına sahip olan p elementlerinin rengi mavi olacaktır. En sonda yer alan span elementi bundan etkilenmeyecektir. Şimdi de bunun tarayıcı ekranına nasıl yansıdığını görelim.
En çok kullanılan seçicilerden bir diğeri ise “id” seçicisidir ve CSS kodlarında “#” işareti ile ifade edilir. Genellikle tek bir elementi tanımlamak için kullanılır. Kısaca onun kullanımını da inceleyelim.
Gördüğünüz gibi id seçicisi kullanarak yalnızca birinci paragrafın yazısının kalın olmasını sağladık. Burada class ve id’lere vereceğiniz isimler tamamen size kalmıştır. Önemli olan html elementlerindeki isim ile css kodlarındaki ismin aynı olmasıdır.
Tabi ki seçiciler bunlarla sınırlı değil. Buraya göz atarak diğer seçicileri inceleyebilirsiniz. Ayrıca CSS konusunda derinlemesine bilgi sahibi olmak isterseniz Türkiye’de CSS denilince ilk akla gelen isim olan Fatih Hayrioğlu‘nun CSS Kitabı‘nı edinmenizi tavsiye ederim.
CSS Nedir? sorusunu cevapladığımıza göre bir sonraki konuda CSS’i biraz daha derinlemesine inceleyerek yalnızca görsel değil, davranışsal olarak da bize neler katabileceğinden de bahsedelim.
