Blogger ve Temel CSS eğitimi

CSS yani en basit haliyle, websitenizde ki elemanlara stil eklemek için kullanılan bir tanımlama denebilir.
Biraz daha ansiklopedik tanımlamaların dışına çıkarsak bundan önceki bölümüzde anlattığımız html ile div kullanarak oluşturduğumuz bölümlerin araka plan rengi,yazı rengi ve daha bir çok tanımlamayı CSS ile yapıyoruz.

Bloggerda CSS kodlarının nerede olduğunu merak ediyorsanız ilk yazımızda buna değinmiştik oraya bakabilirsiniz.

Tabi bu yazımızda konulara derinlemesine indiğimiz için CSS’in daha farklı nasıl kullanıldığına göz atacağız.


CSS’i ve < /head> tagı arasına link vererek kullanabilirsiniz.
bunu yapabilmek içinde oluşturduğunuz CSS dosyasını her hangi bir hosta yükleyerek tam adresini belirterek kullanabilirsiniz.
örnek:


-----------------------------------------------------------------------------------

diğer bir yöntemde kodları stili head bölümü içinde kodlama yaparak belirleyebiliriniz.
bloggerda kullandığımız yönte.
Örnek:


body{
background:#fff;
color:#000;
}



-----------------------------------------------------------------------------------

son olarak ta CSS kodlarını bundan önceki yazımızda değindiğimiz şekilde direk HTML kodlarının içerisine gömerek.

Örnek:
buraya da sayfada görünecek diğer kodlarınız gelir. Bu kullanımlarda hangisi size uygunsa onu bloggerda kullanmanız mümkün ..

Trayıcıda ilk sırada görünecek olan HTML etiketlerinin içine gömüğünüz stiller olacaktır onu Head kodu içerisine yazdığınız kodlar takip eder ve son olarak ta dışarıdan çağırdığınız stil dosyasındakiler.

Buna kısaca bir örnek verecek olursak diyelim ki ben blog’uğumun arka planını html içerisinde siyah olarak belirledim.

buraya da sayfada görünecek diğer kodlarınız gelir. Head içerisindede sarı olarak.


body{
background:#ffff00;
color:#000;
}



dışarıdan çağrılan dosyada beyaz olarak belirlenmiş olsun.

bu belirlediğim 3 kod içerisinde HTML etiketine atadığım siyah arka plan kabul edilecektir.

peki bu ne işimize yarayacak diyebilirsiniz.

Şimdi size küçük bir CSS hilesi vereyim.

Diyelim ki yeni sayfa oluştur özelliğini kullanarak yeni bir sayfa oluşturdunuz ve bu sayfanın içerisinde side barın görünmesini istemiyorsunuz .

O zaman yapmanız gereken yazı panelini HTML’yi düzenle moduna getirdikten sonra


#sidebar-wrapper{
display:none;

}

#main-wrapper{

width:100%;

}



bu şekilde oluşturduğum yeni sayfayı tam ekran haline getirmiş oldum farklı css kodları kullanarak bu sayfayı daha fazla özelleştirmekte elimde.

Burada da örnek bir sayfa hazırladım onu inceleyebilirsiniz.
http://e-bilisim.blogspot.com/p/var-skin-skinbordercolor-cccccc_10.html

sayfaya girdiğinizde sidebarın görünmediğini ve renkelerin değiştiğini göreceksiniz bu yöntemi kullanarak bir birimden bağımsız sayfalar tasarlayabilirsiniz.

CSS konusunda kendisini daha fazla geliştirmek isteyenler için birde kaynak belirtelim.

Fatih hayri oğlu blog'uğu CSS,XHTML ve Javascrip konusunda kendini geliştirmek isteyenler için bulunmaz bir kaynak.
Ayrıca Fatih Hayrioğlu'nun PDF formatında hazırladığı CSS’e başlangıç kitabını bilgisayarınıza indirerek incelemenizi de tavsiye ederim.