CSS, Cascading Style Sheets kelimelerinin kısaltmasından oluşur. “Basamaklı Stil Şablonları” anlamına gelen bir işaretleme dilidir. HTML’i ve barındırdığı verileri görsel olarak biçimlendirmede kullanılır.
Adından da anlaşılacağı üzere basamaklara sahip bir yapıda kullanırız. Tıpkı HTML etiketlerinin bir hiyerarşiye sahip olması gibi CSS kodları da kendi içinde hiyerarşiye sahiptir. İç içe geçen pek çok katmanla HTML verilerini, resim ve metinleri çok sayıda stillerle biçimlendiririz.
Dosya uzantısı “.css” şeklinde verilir. Herhangi bir metin dosyasını boş olarak kaydedip uzantısını .css şeklinde çevirmeniz, css dosyası oluşturmak için yeterlidir. CSS dosyasını, HTML dosyasında head etiketi içinde aşağıdaki kod ile tanımlayabilirsiniz. Site hızı için body kapanışında olması tavsiye edilir.
<link rel="stylesheet" ref="/dosya-yolu/dosya-adi.css" />CSS dosyalarını bir klasörde toplamanız faydalı olur. Genellikle CSS adlı bir klasör içinde kullanırız. Böylece küresel ölçekte her geliştirici zaman kaybetmeden CSS kütüphanelerinin nerede olduğunu bulur.
Mobil uyumlu tasarımların yaygınlaşmasıyla birlikte CSS kodlarını çeşitli cihazların çözünürlük değerine göre tanımlamaya başladık. Zira bir web sitesinin görünümü cihazlara göre farklılık gösterir. CSS’e yeni başlayanlar bunu aklındırma bulundurmalı ancak çalışmalarına temel seviyede başlamalıdır.
CSS, örğenmesi kolay bir işaretleme dilidir. Fakat bu, “basit bir iş”olduğu anlamına gelmez. Zor olan kısmı; bir web sitesini etkili ve doğru şekilde biçimlendirmektir. Bu etkinlik derecesi tecrübeyle olur. Hem CSS kodları yazarak hem de deneyimli ellerden çıkmış CSS dosyalarını inceleyerek iyi bir seviyeye gelebilirsiniz. İkisi de UI yani arayüz tasarımcısı olan iki kişi, biribirinden çok farklı şekillerde aynı görünümü çizebilir. Hatta birisi 3000 satır kullanırken diğeri 6000 satırda yapabilir. Kullanım alanı ve deneyime göre değişir.
Bir işi öğrenmek için her zaman “en” temelden başlamanız gerekmez. Öğrenme biçimleri kişiden kişiye farklılık gösterir. Kattığı hazla birlikte en güzel öğrenme biçiminin, basit dahi olsa işe koyulmak olduğunu söylemeliyiz. Bu nedenle hadi örnek yapalım. HTML konusunda deneyimli olmasanız bile burada CSS öğrenirken HTML etiketlerini de gayet kolay öğrenebilirsiniz.
HTML dilinde divler, en sık kullandığımız etiketlerdir. Class ve ID olarak ikiye ayrılırlar.
Class, bir sınıfı temsil eder. Siz insan sınıfından bir canlısınız. Bir class’a sahipsiniz. Ayrıca benzersiz bir kimlik numaranız var ve bu sizin ID’niz demektir. Hem sınıfa hem ID’ye sahip olabilirsiniz. Ancak her Div’in ID’ye sahip olması gerekmez. Bir dive benzersiz şekilde özellik atanacaksa (özellikle yazılımsal), diğer divlerle karışmaması için ID veririz. Sırf sizin kimlik numaranızı hedef alarak “şanslı kişi sizsiniz ve 1 milyon TL ödül kazandınız” diyebiliriz. Tam olarak kimden bahsettiğimiz bellidir. Bir insan sınıfı, daha geniş ölçeklidir, şehriniz, yaşadığınız semt ya da apartman da geniş bir ölçeği temsil eder. ID işte bu demek oluyor; nokta atışı.
Şimdi bir Div’e class tanımlayalım. İçi boş bir Div olsun. Sonra onu bir güzel biçimlendirelim.
<div class=”mavi-daire”></div>Div’e daireler sınıfını atadık. Şimdi onu ismine yakışır şekilde mavi daireye çevirelim. Classlar “.” (nokta) ile tanımlanır. ID’ler ise “#” işareti ile.
.mavi-daire {CSS kodları bu iki süslü parantez içine gelecek.}Peki biz bu daireyi nasıl biçimlendiririz. Genişliği 80px, yüksekliği 80px olan, arkaplan rengi de blue yani mavi olan bir daire çizelim
.mavi-daire {width: 80px;height: 80px;background: blue;}İşte bu kadar. Şimdi div’in içine bir metin girelim.
<div class=”mavi-daire”>Bu Bir Mavi Dairedir.</div>Mavi zeminin üzerine beyaz ve hafif gri tonlar gider. Biz white, yani beyaz yapalım. Yazı büyüklüğünü de 16px yapalım:
.mavi-daire {width: 80px;height: 80px;background: blue;color:white;font-size: 16px;}Şimdi display, yani CSS görünüm biçilendirmeyi ele alalım. Mavi daireden çoğaltalım.
<div class=”mavi-daire”>Bu Bir Mavi Dairedir.</div> <div class=”mavi-daire”>Bu Bir Mavi Dairedir.</div> <div class=”mavi-daire”>Bu Bir Mavi Dairedir.</div> <div class=”mavi-daire”>Bu Bir Mavi Dairedir.</div>4 adet 80px genişliğinde mavi dairemiz var. Biz bu divlerin display’ini ayarlamazsak yan yana durmazlar. Display özelliği, en sık kullanılan 4 biçime sahiptir; display:block, display:inline-block, display:none ve display:flex komutlarıdır. block, eğer genişlik belirtilmişse bir genişliğe sığdrır ve tek satıra alır, inline-block ise yan yana dizmede kullanılır. Belirtilen genişlik ne ise, o genişlikte yan yana aynı satırda gösterir. None komutu div’i görünmez yapar. HTML artık o div’in hiçbir biçimlendirmesini ekranda göstermez. Flex ise bu dokümanın bir parçası değil. Yeni ve detaylı bir konuyu hak ediyor. Kafa karışıklığına hiç gerek yok. Biz yan yana dizmek istiyoruz. Bu nedenle inline-block kullanalım.
.mavi-daire {width: 80px;height: 80px;background: blue;color:white;font-size: 16px;display: inline-block;}Artık mavi-daire classları yan yana 4 adet, her biri 80px genişliğinde görünür. En az 320px genişlik demektir. Eğer bu divleri kapsayan alan 320px’den küçük olursa, taşan div bir alt satıra kayar. Bu nedenle px türü ölçüler verirken daima, bu divleri kapsayan divleri veya cihazın genişliğini göz önünde bulundurmalıyız.
Şimdi diveri 2 adet mavi daire, 2 adet siyah daire olarak değiştirelim.
<div class=”mavi-daire”>Bu Bir Mavi Dairedir.</div> <div class=”mavi-daire”>Bu Bir Mavi Dairedir.</div> <div class=”siyah-daire”>Bu Bir Siyah Dairedir</div> <div class=”siyah-daire”>Bu Bir Siyah Dairedir</div>Mavi-daire classlarını daha önce biçimlendirmiştik. Aynı şekilde ama arkaplan renklerini değiştirerek siyahı da oluşturalım.
.mavi-daire {width: 80px;height: 80px;background: blue;color:white;font-size: 16px;display: inline-block;}.siyah-daire {width: 80px;height: 80px;background: black;color:white;font-size: 16px;display: inline-block;}CSS derslerinin devamı ve daha fazla bilgi için CSS nedir? başlıklı makalemizi okuyabilirsiniz.
