Yeni Başlayanlar İçin: CSS Nedir?
CSS sayesinde HTML kodlarıyla oluşturduğumuz web sitesinin görsel özelliklerini belirleyebiliyoruz. CSS öğrenmek ve bu bilgiyi kullanmak için en azından temel seviyede HTML öğrenmek de gerekiyor. Çünkü HTML kodları olmadan CSS kodlarının bir anlamı yok.
CSS nedir?
CSS, HTML kodlarının nasıl sunulacağını kontrol eder. Tüm içeriği işlevsel ve estetik şekilde tasarlamamızı sağlar. Menünün nerede olacağı, yazı tipleri, tüm ögelerin yerleşimi gibi özellikleri CSS ile belirleriz. Ortaya çıktığından beri sürekli güncellenen CSS'in son versiyonu ise CSS3.
CSS, Basamaklı Stil Sayfaları anlamına gelen Cascading Style Sheets kelimelerinin baş harflerinden oluşuyor. Aslında bu isim CSS’in ne olduğu hakkında gerekli bilgiyi veriyor. Cascading (Basamaklı), olması CSS kodlarının yukarıdan aşağıya basamak basamak okunduğunu söylerken, Style (Stil) ile CSS’in tasarımsal işlevi olduğunu anlıyoruz.
CSS söz dizimi nasıldır?
CSS kodları, selector (seçici) ve declaration (tanım) olmak üzere iki ana bileşenden oluşur. Seçici, HTML kodlarından hangisini işaret ettiğimizi seçmemizi sağlarken, tanım ise seçtiğimiz öge üzerinde yapmak istediğimiz değişikliği ifade ettiğimiz kısımdır.
Seçici örnekleri: #pageheader, .comment div, li
Tanım örnekleri: {font-size: 10px; color: red;}, {width: 100%; background-color: grey;}
Seçiciler etiket adları, ID’ler, sınıflar gibi pek çok ögeye işaret edebilir. Tanımlar ise bu ögelere tanımladığımız özellik ve değerleri içerir. Yukarıdaki örneklerde gördüğümüz gibi ID seçerken HTML’de belirttiğimiz ID’yi önüne hashtag (#) koyarak, sınıfları başına nokta koyarak, elementleri ise yalnızca ismiyle CSS dosyasına çağırırız. Bir sayfada birden fazla aynı sınıf ve element kullanılabilirken bir ID her sayfada yalnızca bir kez yer alabilir.
Tanımlarla ilgili en temel bilgi ise, her bir tanımın mutlaka süslü parantez içine yerleştirilmesi ve özellik ya da değerlerin sonuna noktalı virgül konulması gerektiğidir. Bir tanım içerisinde birden fazla özellik ve değer yer alabilir.
CSS dosyasının uzantısı .css’dir ve ’den önce link verilerek HTML dosyası ile birbirine bağlanır. Örneği fotoğrafta görebilirsiniz.
Ayrı bir dosya açmak yerine Inline Style yöntemini seçerek her bir elementin içine CSS kodlarını yazabilir ya da içine de Internal Style Sheet yöntemiyle kodları girebilirsiniz. Ancak bu iki yöntem özellikle çok satırlı ve çok sayfalı siteler tasarlarken karışıklık yaratacağı için örnekteki External Style Sheet yöntemini öneriyoruz.
CSS’te Cascading yani basamaklandırma sırası
Web sitenizi tasarlarken farklı yöntemleri bir arada kullanmak da tercih edilebilir. Bu durumda belirlediğiniz stiller belli bir sırayla işlerliğe sahiptir. Buna göre öncelik inline style olarak girdiğiniz kodlardadır. Daha sonra Internal Style Sheet ve External Style Sheet devreye girer. Hiçbir tanım girilmemiş ögeler içinse Browser’ın kendi stil kodları çalışır.
Bu ne anlama geliyor? Örneğin, oluşturduğunuz .css dosyasında tüm paragrafların font büyüklüğünü 10 px olarak belirlediniz. Ancak bir paragrafın daha küçük puntolarla görünmesini istiyorsunuz. Bu durumda .css dosyanıza göre öncelikli olacağı için küçük puntolarla görünecek paragrafta inline olarak CSS tanımlamanız yeterlidir.
Bu yazıda CSS hakkında en temel bilgileri aktardık. Ancak CSS kullanarak işlevsel ve profesyonel web sitesi tasarlamak için bundan daha fazla bilgi edinmeniz gerekiyor. Ahmet Oğuz Mermerkaya’nın hazırladığı HTML5 CSS3 kitabı web tasarımı yolculuğunuzda rotanızı belirlemenize yardımcı olacak tüm bilgilere ulaşmanız için harika bir kaynak.
