Ozicab Design CSS Anlatımları #1 - CSS'e Giriş

Arkadaşlar kendi çağımda sizlere css ve html anlatmaya çalışacağım. İlk olarak kolaydan başlayıp zorlara doğru yola alacağımı düşünüyorum. Bu konuyu yazmak için çok düşündüm eleştirenler ve kötüleyenler veya çok bilmişler çıkacağını bilmeme rağmen ben ders ders anlatacağım. Aslında baya temel olabilir ama bunları bilmeyen arkadaşlarımızda vardır diye düşünüyorum ve yavaş yavaş anlatımıma başlıyorum. Hadi Bismillah..



Css  Html kodlamaya göre daha çok ve farklı stillere sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.



Küçük bir başlık (h1) kodlamasıyla başlayalım, kodda neresi nedir onları anlatarak yazacağım.



h1 {

color: black;

font: italic 11px Arial, serif;

text-decoration: underline;

background: #ddd;

margin:0px 0px 0px 0px;

}



Yukarıdaki kod CSS kodu olduğu için Sitenizde Css kodları kısmına eklemeniz gereklidir. Eğer sitenizde css bölümü yok ise kodumuzun başına ve sonuna;

<style>
 Css Kodunuz Buraya
</style> 

kodlarını koyduğunuz taktirde istediğiniz yere ekleyebilirsiniz.



" color: black; " Css ile yazıya renk verme kodumuz bu kod başka bir şekilde daha yazılabilir. Örneğin " color: #000000; " bu örnekte rengimizi hex kodu ile belirtmiş olduk.



" font: italic 11px Arial, serif; " Css kullanarak yazımızı stillendirme kodumuz. Fontumuzun özelliklerini bu kodumuz ile belirliyoruz. Bu koddaki italic (eğri yazı) yazan yere bold yazarsak yazımız kalın olur. Eğer o kısmı silersek yazımız düz yazı şeklinde çıkar. 11px ise yazımızın fontunun boyutunu ayarlıyorsunuz. Arial,serif ise yazımızın yazı tipidir. Burayı değiştirmek isterseniz temel yazı tiplerini bilmeniz gerekmektedir. Yazı tipimizi nasıl cufon font yaptığımızı ileriki derste anlatacağım.



" text-decoration: underline; " Yazımızın altı çizili olmasına yarar eğer tamamı Üstü çizili isterseniz ( text-decoration:line-through; ), hiçbir değişim olmasın isterseniz de ( text-decoration:none; ) yazmanız yeterlidir.



" background: #ddd; " Css'de arka plan kodudur. Hex kodlama değilde yazı ile temel renk yazmak istiyorsanız ( background: white; ) olarak değiştirmeniz gereklidir. Renk Kodlarına Bakmak için buraya tıklayın.



" margin:0px 0px 0px 0px; " Css'de kenar boşluğu kodudur. Eğer sadece belirli bir kısıma boşluk vermek isterseniz; margin-bottom:0px; bottom aşağı, margin-top:0px; top yukarı, margin-left:0px; left sol, margin-right:0px; right sağ taraf boşluğudur. Değerleri kendinize göre değiştirebilirsiniz.



Yukarıdaki CSS kodumuzun HTML Etiketi:

<h1> Buraya Başlığınız Gelecek </h1>

Şimdilik bu kadar temel anlatım yeterlidir. Bir daha ki anlatımımda görüşmek üzere. Yazımı okuduğunuz için teşekkürler. Anlatım tamamen Oğuzhan Cabbaroğlu 'na aittir. O kadar uğraştım (ç)alıntı yaparken kaynak göster bare insafsız!