Bir önce ki HTML5 eğitim videolarımız da temel olarak HTML5 ile nasıl sayfamızı oluşturabileceğimizi öğrenir iken bunun yanında azıcıkta olsa CSS3 sayesinde oluşturduğumuz bu sayfada ki yerlere ne gibi değişiklikler yapabileceğimizi, ne gibi görsel anlamda iyileştirmeler yapabileceğimizi görmüş olduk.
Bu serinin ilk videosunda HTML5 ve CSS3 ‘ün ne olduğuna daha önce değinmemize rağmen yinede bir göz geçirerek CSS hakkında bilgi edinmek ve ne işe yarayıp bu dil ile neler yapabileceğimiz bilmek, bu dili öğrenmemizi daha da kolaylaştıracaktır.
CSS Nedir ?
CSS3’e geçmeden öncesinde öncelikle CSS kelimelerinin ne anlam ifade ettiğini bilmekte fayda vardır. Baş harflerinin açılımını yazdığımızda ise “Cascading Style Sheets” olan kelimeler topluluğu bizim dilimize çevirdiğimizde “Basamaklı Still Sayfaları” anlamını taşımaktadır.
CSS ile paragrafların rengini değiştirebilir, butonlara çeşitli renk geçişleri sağlayabilme ve daha bir çok görsel değişiklik yapma hakkını sağlar. CSS ortaya çıkmadan öncesinde her bir etikete ayrı ayrı still tanımlamanız gerekiyordu. Fakat CSS ortaya çıktıktan sonrasında böyle bir işleme gerek kalmayıp tek bir dosya sayesinde istediğiniz etiketlere still tanımlayabiliyorsunuz.
CSS Sözdizimi
Temel olarak CSS hakkında bilmemiz gereken terimsel ifadeleri ve ne anlama geldiğini öğrendikten sonrasında ise sıra bizim bir HTML dosyasında ki var olan etiketlere değişiklik yaparak göze güzel görünme işlemine geliyor. CSS ‘in kaç farklı şekilde eklemek yerine öncelikle biz HTML ‘de ki etiketleri kaç farklı şekilde still tanımlayabiliriz bundan bahsetmek istiyorum.
Bununda öncesinde ise biz temel olarak bir etikete, sınıfa, id ‘ye göre still tanımlayacak olsak bile bir nasıl yazıldığını bilmemiz gerekir. Bunun için ise :
p { color:blue; }
Yukarıda yer alan bir still tanımlamasında biz hangi etikete still tanımlayacağımızı süslü parantezin dışına yazarak belirtiyoruz. Ardından süslü parantezler içine ise biz bu etiketin hangi özelliğine hangi değeri atacağımızı bildirerek o şekilde o etiketin bir görünüme kavuşmasını sağlayacağız.
Süslü parantez içinde yer alan kısımda ise “color” bizim o etikete ait bir özelliktir. Yazmış olduğumuz “blue” ise bu özelliğe atanacak olan değeri ifade etmektedir. Daha sonrasında ise noktalı virgül koyarak bu özellik ve değer tanımlamasını başarı ile yapmış oluyoruz. Süslü parantez içerisine sadece bir tane değil birden fazla olacak şekilde özellik ve değer ataması işlemini yapabilmemiz mümkündür.
1. Elemanlara Göre Still Tanımlama
Öncelikle bizler bir HTML sayfasında yer alan istediğimiz eleman etiketlerine göre still tanımlamasını başarı ile yapabiliriz. Fakat bu yöntem birazda olsa tehlikelidir. Bunun nedeni ise biz her hangi bir etikete bir tanımlama yaptığımızda artık bu o HTML sayfasında ki yer alan tüm o etiketleri kapsayarak yapmış olduğumuz düzenlemeler ile karşımıza gelecektir. Fakat biz hiç bir zaman tüm sayfada ki o etikete ait kısımların aynı olmasını istemeyiz.
Örneğin her hangi bir “p” etiketinin arka planının mavi olmasını isteyebileceğiniz gibi o sayfada onu devam eden başka bir “p” etiketinin arka plan renginin kırmızı olmasını isteyebilirsiniz. Bunun için ise direkt olarak o etikete bir still tanımlamak sizin açınızdan tehlikeli olacaktır.
h1 { background-color:red; }
Yukarıda yer alan örnekte ise bir başlık etiketi olan “h1” in arka plan rengine “red” yani kırmızı değerini atamışız. Biz o HTML sayfası içine kaç adet bu başlık etiketini kullanacak olursak kullanalım sürekli olarak arka plan rengi kırmızı olacaktır. Eğer sürekli olarak değilde sadece bizim belirlediğimiz başlık etiketlerinin yada her hangi bir etiketin yazacağımız özellik ve değere sahip olmasını istiyor isek kullanmamız gereken işlem bir id yada class tanımlaması yapmamız gerekmektedir.
2. CSS ID Kullanımı
İstediğimiz elemente bir id tanımlayarak yani bir kimlik tanımlayarak bu etikete istediğimiz şekilde özelliğine göre bir değer atayarak şekillenmesini sağlayabiliriz. Bunun için ise öncelikle bir HTML sayfamızda bir etikete nasıl kimlik tanımlayacağımızı hatırlayalım.
<p id="kimlik">Bir şeyler</p>
Yukarıda yer alan kısımda ise “p” etiketine bir kimlik tanımlamış bulunuyoruz. Yukarıda yer alan kimlik kısmı yerine kendiniz bir ifade vererek ona göre CSS dosyanız içinde ve o etiketi size anımsatacak bir isim, ifade kullanabilirsiniz.
#kimlik { color : green; }
Bu sefer ise birinci kısımdan farklı olarak bizler bir etiketin ismini yazmak yerine bir etikete tanımladığımız kimliğin ismini yazıyoruz ve bu kimliğin önüne ise bir diyez (#) işareti koyuyoruz. ID sadece ve sadece bir tek etikete tanımlanabilir. Diğer bütün verdiğiniz aynı sahip kimliğe sahip etiketler aynı özelliklere sahip olacaktır. Fakat class yani sınıf verirseniz sınıflara ait etiketlere ait still eklemeniz mümkün olacaktır.
3. CSS Class Kullanımı
Biz HTML sayfasında birden fazla etikete bir sınıf tanımlayarak ve bu sınıfa ait farklı farklı etiketlerin hepsine birer farklı still tanımlamaları yapabiliriz. Bunun için ise isterseniz öncelikle bir HTML ‘de nasıl sınıf tanımladığımızı hatırlayalım.
<p class="sınıf">Bir şeyler</p> <h1 class="sınıf">Bir şeyler</h1>
Yukarıda iki farklı etikete de sınıf tanımlama işlemini gerçekleştirdik. Şimdi ise sıra asıl bizim bunlara nasıl bir still ekleyip görünümlerini değiştirebileceğimize geliyor. Bunun için ise :
.sınıf { color : white; background-color: black; }
Yukarıda ise kimlik tanımlamasından farklı olarak ise bu sefer önüne nokta işareti koyuyoruz. Hangi etikete bu sınıf değerini verirsek verelim bizlere rengini beyaz ve arka plan rengini siyah olarak getirecektir. Fakat biz vermiş olduğumuz bu class a sınıf ismini verdik. Ama biz bu sınıf ismini “h1” ve “p” etiketine tanımladık. Bunlar aynı class değerine sahip olmasına rağmen farklı stiiller ekleyemez miyiz ? Tabi ki ekleyebiliriz. Bunun için ise :
h1.sınıf { color : pink; } p.sınıf { color : orange; }
Yukarıda ise aynı sınıfa sahip olan etiketlerin “h1” ve “p” etiketlerine bir genelleme yaptık. Aynı class ‘a sahip olan etiketler artık tüm h1 etiketleri rengi pembe, aynı class a sahip olan tüm p etiketlerinin rengi ise turuncu olacaktır. Fakat biz bunu id ile yapmaya kalksaydık ne yazık ki karşımıza böyle bir seçenek çıkmayacaktır. Class lar ise genellikle div etiketleri için kullanılmaktadır.
4. CSS Gruplama
CSS gruplama işleminde ise bizler öncelikle örneğin belirli bir etiketlere aynı değerleri vermek istiyor isek birden fazla satırda aynı şeyleri tekrarlamak yerine biz istediğimiz etiketlerde istediğimiz özelliklerin istediğimiz değerlere sahip olmasını istiyor isek bu yöntemi kullanabiliriz.
h1,p,h2 {
color : brown;
}
Bizler yukarıda ki tanımlama sayesinde bir HTML sayfasında yer alan “h1“, “h2“, “p” etiketlerinin hepsinin özelliği renk olan ve değerini kahverengi yapma işlemini gerçekleştirmiş bulunuyoruz. Artık bu sayede ayrı ayrı p, h1, h2 yazmak yerine hepsini bir kerede yazarak düzenli kod yazma ve satır sayısından tasarruf etmiş bulunuyoruz.