Tutorial : Basic To Understand Text or Fonts Styling.
Written by : hamizashuhada on Tuesday, 11 February 2014 | 04:38 | 3 comments

Assalamualaikum and hi readers.

Untuk text styling,berdasarkan apa yang aku observe,benda ni terbahagi kepada lima bahagian.Bahagian-bahagian tersebut ialah jenis font,warna font,text alignment,text decoration dan text-transform.Penting untuk sesiapa sahaja yang nak cuba buat skin sendiri ( aku rasa penting ) untuk memahami styling ni.

So,lets start our learning.

FONT TYPE.

Font type atau jenis huruf ini basically menentukan macam mana rupa font dekat blog korang.Ada banyak jenis font macam trebuchet ms,short stack,masana dan macam-macam lagi.Ada orang akan guna font-face,ada yang guna google fonts.Aku guna dua dua tapi lebih kepada google fonts lah.

Pemilihan jenis font ni sebenarnya agak penting sebab ianya merupakan tumpuan utama orang bila buka blog korang.Ceh.

Untuk tukar jenis font dalam blogskin,korang tekan CTRL+F dan cari code font-family kat dalam coding korang.Kalau baru nak masukkan,boleh tambah kod ni kat mana-mana sahaja yang korang nak.Sebagai contoh kat coding bahagian sidebar atau pun main-title korang.

font-family : NAMA FONT;

FONT COLOR.

Warna font pun penting juga.Senang kata semua benda yang berkaitan dengan font ni pentinglah ! Kalau korang punya post body dah warna putih,janganlah letak warna font putih juga ( ada ke orang buat macam tu ?) Sebaiknya warna font tu biar yang terang sikit macam hitam ke kelabu ke biru ke.Tapi selalunya orang akan guna hitam atau kelabu lah.

Jarang nampak ada yang guna warna pink.

Untuk tukar warna font,korang cari code color: # 00FF00; kat dalam coding korang.Kalau baru nak masukkan,boleh tambah kod ni kat mana-mana sahaja yang korang nak tapi kena make sure coding untuk jenis font dah ada kat situ.

color: KOD WARNA;

*Kod warna boleh dapat kat color codes.


TEXT ALIGNMENT. 

Cara paling senang untuk korang faham apa itu text alignment ialah secara asasnya ia berfungsi untuk menentukan kedudukan teks samada ke sebelah kiri,kanan atau pun di bahagian tengah.Sebagai contoh,

Ini rupa main-title aku kalau font alignment aku tetapkan sebagai right.

Ini kalau font-aligment aku ditetapkan sebagai left.


Ini pula kalau aku guna font alignment center.

Ada tiga jenis font-alignment iaitu left,right dan center.Untuk guna  font alignment,copy kod ni dan paste kat bawah kod font-family korang.

text-align:LEFT/RIGHT/CENTER;

*Sila pilih salah satu kedudukan samada kiri kanan atau tengah.


TEXT DECORATION .

Text decoration ni setakat yang aku tahu ada tiga jenis.

NONE.
None ni untuk buang semua decoration ( underline/bold) kat text korang.

text-decoration: none;

UNDERLINE.
Underline ni untuk ada garisan kat bawah text korang,

text-decoration: underline;
LINE-THROUGH.
Line through ni untuk ada effect macam cancelled words kat text korang.Contoh :

DUNIA AKAN LEBIH AMAN TANPA CICAK.


text-decoration: line-through;

 TEXT-TRANSFORM.

Basically text transform ni untuk tentukan huruf besar atau huruf kecil dalam sesuatu yang dipanggil ayat.Boleh je kalau korang nak guna CAPS LOCK kat keyboard korang tu.Tapi kalau nak guna text-transform pun boleh.

Untuk text yang semuanya huruf besar,kita guna code UPPERCASE.
text-transform: uppercase;

Untuk text yang semuanya huruf kecil,kita guna code LOWERCASE.

text-transform:lowercase;


Macam post title aku tu,aku guna uppercase.


Fuhh,thats it.Panjang juga entry ni,ingatkan sekejap je boleh siap.Sorry kalau korang tak faham penjelasan ni tapi aku harap apa yang aku update ni boleh membantu korang.Kalau tak faham apa-apa tanya je,sebab benda ni simple,aku rasa insyaallah aku boleh jawab kalau ada sebarang kekeliruan.

Wasalam.



Blogger Eduardo Gabriel said...

Será útil para mim ^^
alive-html.blogspot.com.br

 
Blogger Eduardo Gabriel said...

Será útil para mim ^^
alive-html.blogspot.com.br

 
Blogger Raizah Halisah said...

thankyou for this tutorial :D

 

Post a Comment