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

Farkryzer