| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

Bab III : Belajar CSS bagian 2 ( Font | Tulisan )


Setelah sebelumnya materi 
Bab II : Belajar CSS Bagian 1 (Background)
saya bahas (semoga tidak ada hambatan)

Mari kita masuk ke materi selanjutnya, yaitu Bab III : Belajar CSS bagian 2 (Font | Tulisan)

Pada Bab III : Belajar CSS bagian 2 (Font | Tulisan)
Kalian akan mempelajari tentang :
1. Cara membuat tulisan berwarna dengan CSS
2. Cara menselaraskan tulisan menjadi rata tengah, kanan, kiri atau justify dengan CSS
3. Cara mengatur besar tulisan dengan CSS
4. Cara membuat dekorasi pada tulisan dengan CSS
5. Cara membuat transformasi tulisan dengan CSS
6. Cara mengatur jenis tulisan dengan CSS
7. Cara membuat bentuk tulisan bold, italic dengan CSS

Tahap Sebelumnya | Bab 2 : Belajar CSS bagian 1 (Background)

Jika sebelumnya saya bahas tentang cara mendesain background dengan CSS sekarang saya akan kembali menjelaskan CSS untuk mendesain tulisan, mari kita simak bersama-sama

   1. Warna Tulisan ( Font Color )
        Sebetulnya tidak ada bedanya antara cara membuat warna background dengan warna tulisan semuanya sama-sama menggunakan HEX, RGB atau kode warna b.inggris, jika ingin melihat kembali caranya. Ini Rumusnya :

Selector {color:kode warna;}

# Keterangan :
kode warna : dapat akamu ganti dengan HEX, RGB atau kode warna b. inggris,contoh :

#footer-wrapper h2 {color:#7CFC00;}
maka akan jadi seperti ini :
Farkryzer Community

   2. Keselarasan Tulisan ( Text-Alignment )
         Sesuai judulnya berarti menyelaraskan tulisan baik itu rata tengah, kanan, kiri atau justify (rata kanan kiri). Silahkan lihat rumusnya dibawah ini :

Selector {text-align:Alignment;}

# Keterangan :
Alignment : silahkan ganti dengan keinginanmu: center (rata tengah), right, contoh :
#footer-wrapper h2 {color:#7CFC00;text-align:center;}
maka akan jadi seperti ini :
Farkryzer Community
    
   3. Besar Tulisan ( Font Size )
         Ada 2 cara yang bisa kamu pakai, yaitu :
         a. Dengan satuan pixel
          Cara ini yang paling sering digunakan yaitu menentukan besar tulisan dengan px,
Rumusnya yaitu :

Selector {font-size:besar tulisan;}

# Keterangan :
besar tulisan: dapat kamu tentukan dengan pixel, contoh:
#footer-wrapper h2 {color:#7CFC00;text-align:center;font-size:24px;}
maka akan jadi seperti ini :
Farkryzer Community
         b. Dengan satuan em
          Cara yang satu ini tidak berbeda dengan diatas, sekarang ingat baik-baik 1em itu 16px jadi kalau 2em 32px .5em 8px dan seterusnya. Rumusnya yaitu :

Selector {font-size:besar tulisan;}

# Keterangan :
besar tulisan: dapat kamu ganti dengan satuan em, contoh:
#footer-wrapper h2 {color:#7CFC00;text-align:center;font-size:1.5em;}
maka akan jadi seperti ini :
Farkryzer Community
Note :Mengapa menggunakan em ? karena px tidak kompatibel dengan internet explorer maka dari itu agar semua browser dapat kompatibel dengan blog kamu gunakan em meskipun agak rumit, tetapi sangat berguna

       4. Dekorasi tulisan ( Text Decoration )
         Cara ini berhuna untuk kamu yang ingin mendesain web atau blog untuk mendokarasi tulisan menjadi bergaris bawah, blink, coretan, garis tepi atas. Rumusnya yaitu :

Selector {text-decoration:dekorasi tulisan;}

# Keterangan :
dekorasi tulisan : silahkan ganti dengan kode dibawah yang ingin kamu pakai :
  • none ( efek ini berguna jika kamu ingin meniadakan garis bawah atau dekorasi lain yang ada pada tulisan ) :
    Farkryzer
  • underlineFarkryzer
  • blinkFarkryzer
  • line-through
    Farkryzer
  • overline
    Farkryzer

        5. Transformasi Text ( Text Transformation )
         Cara ini digunakan untuk mendesain tulisan itu tetap kapital pada awal kata meskipun saat menulis tulisan memakai huruf kecil ataupun tulisan tetap kecil dan kapital

Selector {text-transform:perintah transformasi;}

# Keterangan :
perintah transformasi: dapat kamu sesuai keinginan kamu dengan perintah dibawah ini :
  • uppercase
    Farkryzer community
  • lowercase
    Farkryzer community
  • capitalize
    Farkryzer community

        6. Jenis Tulisan ( Font Type )
         Cara ini cukup penting karena merupakan salah satu kunci utama mendesain web / blog yaitu mengatur jenis tulisan, tuntunya di atur agar tulisan cocok / pas dengan isi web, Rumusnya yaitu :

Selector {font-family:jenis tulisan;}

# Keterangan :
jenis tulisan:tinggal tuliskan saja jenis tulisan / font family-nya seperti arial, times new roman, verdan ( ingat, pakai tulisan yang sudah pasti ada di setiap komputer  )

#footer-wrapper h2 {color:#7CFC00;text-align:center;font-size:24px;font-family:arial}
Farkryzer Community

       7. Font Style ( Bold / Italic / Oblique )
         Font Style berguna jika tulisan akan dibuat tebal / miring, Rumusnya yaitu :

Selector {font-style:bentuk tulisan;}

# Keterangan :
bentuk tulisan: dapat kamu ganti sesuai keinginan : bold / italic / oblique
#footer-wrapper h2 {color:#7CFC00;text-align:center;font-size:1.5em;font-style: italic;}
maka akan jadi seperti ini :
Farkryzer Community

| Bab IV : Belajar CSS bagian 3 ( Link | visited | hover ) | Tahap Selanjutnya

4 komentar:

  1. Alhamdulillah sudah di follow, terimakasih atas kunjungannya, mohon maaf kasih komentar disini karna shoutboxnya mas bro ga bisa saya ketikkan, mungkin chorome saya yang error kali yah :), saya akan coba belajar css dari sini, semoga ilmunya bermanfaat, keikhlasan itu penting, rasa sombong bukanlah hal yg terlalu dijunjung tinggi, ini semboyan saya, mohon maaf lahir batin. :)

    BalasHapus
  2. @Islam Kaffah Indonesia: oke terima kasih dah follback sesuai keinginan saya :D

    BalasHapus
  3. wah......mantap sob...ane memang suka dengan CSS

    BalasHapus
  4. @Muhammad Arif: sip bro, CSS memang sangat menarik untuk di pelajari

    BalasHapus

Share entri ini :