Blogger için Temel CSS eğitimi

CSS yani en basit haliyle, web sitelerinde 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 DİV kullanarak oluşturduğumuz bölümlerin arka plan rengi,yazı rengi,kenar boşlukları gibi , daha bir çok tanımlamayı CSS ile yapıyoruz.

Sırası ile Blogger Kumanda paneli ➜ Şablon  yolunu takip ederseniz, blog’unuzun tasarımını değiştirebileceğiniz , kullandığınız şablon’u bilgisayarınıza yedekleyebileceğiniz veya blogger’ın hazır şablonlarından birini seçebileceğiniz sayfa sizi karşılayacaktır.

HTML’yi düzenle yazan butona bastığınızda , diğer tüm bölümlerde ve şablon düzenleyicisini kullanarak yaptığınız değişiklikleri kodlanmış olarak görebildiğiniz bir modül açılacaktır.

Klavyenizdeki CTRL ve F tuşuna aynı anda basarak açılan arama formunda <b:skin>terimlerini aratın, bulduğunuz bu kod ile başlayıp </b:skin> ile biten tüm kodlar blog’unuzunCSS kodları oluyor.(daha fazla ayrıntıyı ilk yazımızda bulabilirsiniz.)

Hangi bölümü düzenlemek isterseniz o bölümün kodlarını bulup , kulaklı parantez {  }içerisine alınan kodlar üzerinde değişiklikleri uygulayabilirsiniz.

Aşağıda bulunan kodlarda tasarımınızı özelleştirirken, en sık değişiklik yapmaya ihtiyaç duyacağınız kodlardan bazıları. Bu kodları inceleyerek kendi şablonunuz üzerinde uygularsanız size daha fazla fikir verebileceği gibi pratikte kazandıracaktır.

Kodlar	Örnekler
Renkler(color)
color:blue;	Bu metin mavidir.
background:yellow;	Buda  sarı renkli bir arka plana sahiptir.
Burada çok sık kullanılan renkler (mesela kırmızı, yeşil, sarı) gibi renkleri İngilizce isimleri ekleyebilir  ya da daha büyük bir renk aralığı (örn. # 0033AA) için onaltılık kodları kullanabilirsiniz.   <<-- On altılık renk kodlarını görebilmek için  tıklayın. .
Borders(kenarlık,sınır çizgisi)
border:solid 1px red;	Bu metnin kırmızı renkli  bir sınırı vardır.
Bir sınır çizgisi, düz(solid), noktalı(dotted) veya kesik(dashed) çizgilerden oluşabilir. Burada genişliği piksel (px) olarak belirtilir. Rengiyse İngilizce adı veya onaltılık kodlar şeklinde olabilir. Sadece bir tarafta sınır çizgisi içinse , border-top(yukarıda), border-bottom(altta), border-right(sağda), ya da border-left(solda) şeklinde kullanılır.
Fontlar
font-family:"Times New Roman",Serif;	This is in a serif font.
font-family:Verdana,Sans-Serif;	Bu sans-serif fonttur.
Yazı tipini belirleyebilmek için bir liste oluşturabilirsiniz. Bu sayde blog ziyaretçilerinizin bilgisayarlarında olan fontlara göre yazıların şekillerini belirtir.
font-size:18px;	Bu metin 18 piksel büyüklüğünde
Yazı boyutlarını px olarak belirlediğiniz değerle oynayarak düşürebilir veya yükseltebilirsiniz.
font-weight:bold;	Bu metin kalındır.
Seçimleri kalın(bold) veya normal olarak yapabilirsiniz.
text-decoration:underline;	Bu metin altı çizili.
Metinlerinize çeşitli efektler uygulayabilirsiniz. underline(altı çizili), line-through(üstü çizili),
text-align:right;	Bu metin sağa hizalanmış.
Hizalama sağ(right), sol(left) ya da justify(ortalamak)
Kenar boşlukları(margin) ve İçerden(padding) boşluk vermek
margin:15px;	Bu çizginin etrafında 15px boşluk vardır.
padding:15px;	Bu alanda 15px boşluk vardır.
Kenar boşluğu(margin) veya  alanı içinde boşluk miktarını belirtmek için padding kullanılır(Sınır burada sadece örnek olması içindir.) Sınır olduğu gibi, margin-left(soldan), padding-top(yukarıdan),vs  tek seferde de ayarlayabilirsiniz, ayrıca   bir tarafı belirtmek margin: 1px 2px 3px 4px; sırayla  üst, sağ, alt sol olarak ta ayarlayabilirsiniz

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