İnternet sitesini yapmak için kullanacağımız temel dil olan HTML5’te bazı nitelikler ekleyebilmek için CSS3’e ihtiyaç duymaktayız. CSS Cascading Style Sheets kelimelerinin baş harflerinden meydana gelerek Türkçe ‘de ise Basamaklı Still Sayfaları anlamına gelmektedir.
Basamaklı Still Sayfaları sayesinde bir internet sitesinin sayfalarını tek bir dosya ile kontrol etmek mümkündür. CSS kodları internet sitenize 3 farklı şekilde eklenebilir. Bunlar :
[accordion] [accordion_content title=”#1 Inline CSS” icon=”” active=”active”]Satır içine ekleyeceğiniz bir her hangi CSS kodudur. Her hangi bir etikete o an için her hangi bir karar ile istediğiniz niteliği ekleyebilirsiniz. Bu tarz bir etiketin içine CSS kodları ekliyor iseniz ekleyeceğiniz kod Inline CSS olarak nitelik kazanacaktır.[/accordion_content][accordion_content title=”#2 Internal CSS” icon=”” active=”active”]Bu CSS kodları ekleme niteliği ise sizin bir sayfaya özel ekleyeceğiniz ve o sayfa için geçerli olacak olan kodlardan ibaret olacaktır. HTML ile oluşturacağınız internet sitesinde ki bu kodlar ise sayfanın kısmı içerisine yazılacak olan etiketleri arasında yazılır ve sadece o sayfayı ilgilendirir.[/accordion_content][accordion_content title=”#3 External CSS” icon=”” active=”active”]İngilizce olan External kelimesini Türkçeye çevirdiğimiz zaman harici anlamını taşımaktadır. Bir nevi yazmış olacağımız tüm CSS kodlarını bir harici sayfa oluşturarak yazmamız gerekir. Yazılan bu CSS kodlarını ise her hangi bir farklı sayfada kullanılacak isek tek yapılması gereken o sayfanın bölümü içerisinde bu dosyanın çağrılması olacaktır.[/accordion_content] [/accordion]
Yukarıda yer alan şekilde CSS kodlarını eklemek için farklı farklı yöntemler olduğunu gördünüz. Sizlerde oluşturacak olduğunuz internet sitenizde kullanmanız gereken Basamaklı Still Sayfalarını yerine ve durumuna göre belirleyebilir o doğrultuda temiz kod yazma işlemine geçebilirsiniz.
Bu yazımızda ise temel olarak CSS3 ile ne gibi öznitelikler ekleyebilir ve bu öznitelikleri nasıl ekleyebileceğimiz hangi kodları kullanmamız gerektiğinden biraz bahsedeceğim. Bundan sonra ki eğitim videoları ve yazılı içeriklerde temelden ve yavaş yavaş CSS3 ile ilgili bilgiler vereceğim. HTML5’i tamamen bitirdikten sonrasında ise geri kalan eksik konulara CSS3 başlığı ile devam edeceğim. Bu içerikte ise işleyeceğimiz konular :
- CSS3 Fontları
- CSS3 Kenarlık Eklemek
- CSS3 Kenarlık Eklemek
- CSS3 Dolgu Eklemek
- CSS3 Her Taraftan Eşit Boşluk Eklemek
- CSS3 ID Eklemek
- CSS3 Her Taraftan Eşit Boşluk Eklemek
olacaktır. Bu sayede bu yazılı ve videolu içerikte bunlara değinebilir. Bunlar üzerinden bilgiler edinebilir ve bilgilerinizi pekiştirebilirsiniz. İsterseniz yavaş yavaş içerikte yer alan konulara sırası ile geçelim.
CSS3 Fontları
CSS fontları diye bir başlık açtığımızda temel olarak bu fontları 3 parçaya ayırabiliriz. Bu CSS fontları bize bir etiketin içine eklediğimizde o yazının rengini, font ailesini ve boyutunu belirleyebilmemize yarar.
h1 {
color: olive;
font-family: calibri;
font-size: 250%;
}
p {
color: red;
font-family: courier;
font-size: 160px;
}
Yukarıda vermiş olduğum CSS font kodlarını istediğiniz şekilde ekleyebilirsiniz. Font kodları sayesinde bir etiketin boyutunu, rengini ve font cinsini belirleyebilmeniz için imkan sağlar.
CSS3 Kenarlık Eklemek
Eğer CSS border etiketi olarak geçen <head> kısmında sadece <style> etiketi içine ekler iseniz ekleyeceğiniz o etikete ait tüm yazdıklarınız kenarlıklı olarak gözükecektir. Fakat siz sadece paragraf etiketinin içine ekler iseniz de sadece o etiket bundan etkilenecektir.
p {
border: 5px solid darkblue;
}
Yukarıda yer alan etiketi dilediğiniz gibi kullanabilirsiniz. Önemli olan ise sayfanın <head> kısmı içerisine eklerseniz bundan sonra o sayfada ki tüm <p> etiketlerinin kenarlıklı ve kenarlık renginin lacivert olacağını bilmeniz gerekmektedir.
CSS3 Dolgu Eklemek
CSS3 padding etiketi olarak adlandırılan Türkçeye çevirdiğimizde dolgu anlamını alan bu kelime ise çerçeveye kenarlık ile arasında boşluk ekleme işlemine yarar.
p {
border: 5px solid darkblue;
padding: 30px;
}
Yukarıda yer alan kodda ise kenarlık ile p etiketi içine yazılan kelimenin arasına 30 pixel kadar boşluk eklemiş ve 30 pixel kadar yazı çerçevenin içinden başlayacaktır.
CSS3 Her Taftan Eşit Boşluk Eklemek
Bir bakıma baktığınız zaman CSS3 margin etiketi ise o yazının her tarafından eşit sayıda boşluk eklemesidir. Her tarafından eşit boşluk eklenerek altına yada üstüne yazılan ne olursa olsun üstünde ki ve altında ki ile arasında o kadar fark olacaktır.
p {
border: 5px solid darkblue;
margin: 50px;
}
Yukarıda ki kod satırında ise p etiketi ile yazılan her şeye 5 pixel kalınlıkta ve lacivert çizgili bir çerçeve olacaktır. Bu çerçevenin altına üstüne ne yazılırsa yazılsın hep bunlardan 50 pixel uzaklıkta olacaktır.
CSS3 ID Eklemek
Örnek olarak bazı paragraf etiketlerine id ekleyerek sadece onların belirli şekilde gözükmesini isteyebilirsiniz. Her paragraf etiketi aynı şekilde yer almasını değilde sadece sizin istediğiniz paragraf etiketleri sizin tanımladığınız bazı yerlerde o şekillerde görünmesini isteyebilirsiniz. Bunun için ise öncelikle <head> kısmına aşağıda yer alan kodu eklemeniz gerekmektedir.
#paragraf1 {
color: olive;
}
Bu sayede id sine paragraf1 yazacağınız etiketler yeşil renkte görünecektir. Her hangi bir etikete id tanımlamak için ise <body> içine o etiketin içine aşağıda ki kodu kullanabilirsiniz.
<p id="paragraf1">Birinci paragraf</p>
<p> etiketi içine tanımladığımız paragraf1 id ‘si sayesinde artık bu “Birinci paragraf” yazısı yeşil renkte görünecektir.
CSS3 Sınıf Öznitelik Ekleme
ID eklemek yerine bir etikete sınıf vererek ve o sınıfı o etiketin içine belirttiğimizde ID ‘de ki olduğu şekilde o etiketi belirlemiş olduğumuz şekilde gösterebiliriz. Bunun için ise öncelikle <head> etiketinin içine aşağıda ki kodu eklememiz gerekir.
h1.baslik {
color: red;
}
Bu kodu ekledikten sonrasında ise bu sınıfı sadece <h1> etiketleri içinde belirterek o etiketin renginin kırmızı olarak gösterebilirsiniz. Bunun için ise :
<h1 class="baslik">1. Başlık</h1>
Yukarıda yer alan şekilde kullandığınız bu sınıfı sadece <h1> etiketlerinde kullanabilir ve sınıfını belli ettiğiniz <h1> etiketleri kırmızı renkli olarak gözükecektir.