Font dan Teks pada CSS

Tentu penggunaan font dan text pada CSS berbeda dengan HTML. Jika HTML hanya menggunakan <font>
CSS harus menggunakan Property dan Value terlebih dahulu. Cara ini lebih efektif untuk Validasi CSS3 karena jika kalian langsung menulis <font> tanpa menggunakan CSS dapat mengurangi Valid-nya CSS3 blog atau website kita.

Ada beberapa property dalam Font pada CSS seperti :
font-family, font-size, font-weight, dan lain lain.

Pada Text dalam CSS juga terdapat beberapa Property seperti :
text-align, text-decoration, text-transform, text-shadow.

Dan pada pembelajaran kali ini kita akan sikat habis semuanya :D

Font Family

Pada pembelajaran kali ini saya akan membuat contoh CSS text

<style type="text/css">
.text {
background:none;
font-family:"Oswald";
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Ini contoh

Mari kita coba ubah jenis font-nya, apakah hasil-nya akan berbeda?
Saya akan gunakan text1 untuk contoh kedua

<style type="text/css">
.text1 {
background:none;
font-family:"courier new";
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Contoh 1

Berdasarkan hasil yang didapat font-family berfungsi untuk menentukan Jenis Font yang kita pakai dalam CSS yang kita buat

Font Size

Sekarang saya menggunakan contoh font-size-1

<style type="text/css">
.font-size-1 {
background:none;
font-family:"courier new";
font-size:14px; 
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Font Size 1

Sekarang kita buat baru dengan Size yang berbeda
saya menggunakan contoh font-size-2

<style type="text/css">
.font-size-2 {
background:none;
font-family:"courier new";
font-size:18px;
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Font Size 2

Berdasarkan hasil dari percobaan diatas maka disimpulkan bahwa font-size beguna untuk mengatur ukuran font dalam CSS yang kita buat.

Untuk font-weight mungkin tidak perlu saya jelaskan karena sam saja dengan blod, cukup tambahkan <b> diawal dan </b> diakhir element.

Text Align

Sekarang kite kite pake contoh CSS align

<style type="text/css">
.align {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px; 
color:#FF000;
text-align:center;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Iam in Center :p

Kita coba perapihan barisan yang lain seperti, Left, dan right. Caranya cukup ganti text-align:center; ( Yang berwarna merah ) menjadi left atau right.
Kita buat contoh CSS right dengan font berada di kanan

<style type="text/css">
.right {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px; 
color:#FF000;
text-align:right;
}
</style>

Maka akan menghasilkan seperti dibawah ini

I am in right side xD

Setelah kita buat percobaan ternyata property text-align berguna untuk mengatur perataan teks pada CSS yang kita buat.

Text Decoration

untuk menguji coba property ini saya pake contoh decor

<style type="text/css">
.decor {
background:none;
width:100%;
font-family:"courier new";
font-size:14px;
color:#FF000;
text-align:left;
text-decoration:underline;
}
</style>

Maka akan menghasilkan seperti dibawah ini

Iam with Underline >.<

Bisa kita lihat dari contoh diatas bahwa Text Decoration untuk memberi Dekorasi terhadap teks yang kita buat di CSS
Berikut beberapa value dari text-decoration:
blink : Untuk memberi efek bling bling
line-through: Untuk memberi efek coretan
overline: Untuk memberi efek Garis Atas
underline: Untuk memberi efek Garis Bawah

Penulisan : text-decoration:value;

Text Transform

Agar bisa membuktikan apa gunanya property ini, saya gunakan contoh CSS transform

<style type="text/css">
.transform {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px;
color:#FF000;
text-align:left;
text-decoration:none;
text-transform:uppercase;
}
</style>

Maka akan menghasilkan seperti dibawah ini

I'am is uppercase! xP

Bisa kita lihat bahwa fungsi dari text-transform adalah untuk merubah text kita menjadi besar atau kecil semua. untuk mengubahnya silahkan kalian ganti value "uppercase" dengan value dibawah
Berikut beberapa value dari text-transform:
uppercase :  untuk membuat font Besar semua
lowercase : untuk membuat font Kecil semua
capitalize : untuk membuat huruf kapital otomatis

penulisan : text-tranform:value;

Text Shadow

untuk menguji-nya kita buat CSS shadow

<style type="text/css">
.shadow {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px; 
color:#FF000;
text-align:left;
text-decoration:none;
text-transform:uppercase;
text-shadow:    0px 1px #577079,
   0px 2px #577079,
   0px 3px #577079,
   0px 4px #577079,
   0px 5px #577079,
   0px 6px #577079,
   0px 7px #577079,
   0px 7px 10px #333;
}
</style>

Maka akan menghasilkan seperti dibawah ini

I am cool with shadow >.<

Dengan kata lain bahwa text-shadow berguna untuk membuat efek bayangan pada teks. Untuk mengkreasikan bayangnmu berikut adalah pengaturan Value pada text-shadow

text-shadow: (text shadow ke kiri atau ke kanan dalam px) (text shadow keatas atau kebawah dalam px) (Tingkat blur shadow dalam px) (Warna shadow)


Seomga kalian paham dengan semua ini >.<
Jika ada yang ingin ditanyakan silahkan tanyakan saja >.<