Sabtu, 08 April 2017

Belajar CSS Dasar Bagian 5 – Text Styling

   Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa code Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS Dasar Bagian 4 – Font Styling. Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

Belajar CSS Dasar Bagian 5 – Text Styling

    Baik kembali lagi bersama saya selaku admni dari lupacode. Pada kali inikita masih dalam materi css dasar, dan pada pembahsan kali ini saya akan membahas mengenai Text Styling. Pada pembahasan sebelumnya kita telah belajar mengenai font, dan kali ini kita akan mengenai text. Seperti sebelumnya yang saya bilang css membedakan antara font dan text dimana font itu terkait dengan font nya atay type face nya seperti arial, times new roman, itu merupakan typeface nya sedangkan text itu terkait dengan properti pendukungnya. Seperti warna, indentasi, jarak antar kata, jarak antar huruf dan lain sebagainya.
     Kita langsung saja masuk ke bagian text styling. Sekarang kita lihat property apa saja yang ada di dalam text ini. Di dalam css kita juga bisa memberikan komentar yah, dengan tag seperti ini
/* ini adalah komentar */
Sekarang kita lihat property apa saja yang ada di dalam text ini
Text Styling



Color => Memberi warna pada tulisan

Text-align => Mengatur format paragraf / teks
Text-indent => Memberi indentasi pada teks atau paragraf
Text-decoration => Memberi dekorasi pada paragraf
Teks-transform => Memberi jenis huruf menjadi huruf besar atau kecil / kapital
Letter-spacing => Memberi spasi antar huruf
Word-spacing => Memberi spasi antar kata

Baiklah yang pertama akan kita bahas adalah mengenai warna atau color

lupacode - Belajar CSS Dasar Bagian 5 – Text Styling 1

     Kita lihat bahwa kita bisa memberikan beberapa type warna, jadi jika kalian tau nama warna dalam bahasa inggris, saya yakin bahwa css dapat mengenali nya. Contoh penulisan nya : h1 { color: skyblue; }
     Selanjutnya yang kedua adalah text-align didalamnya ada left, right, center, dan justyfy. Cara penulisannya adalah seperti ini saya akan atur rata text untuk paragraf p { text-align: justify; } Maka otomatis paragraf yang ada didalam file html akan berubah tulisannya menjadi rata kiri dan kanan ( Justify )
     Selanjutnya ada text-indent untuk memberikan indentasi pada paragraf dan satuannya bisa px atau % contoh penulisannya adalah seperti ini p { text-indent: 100px; } Maka hasilnya adalah seperti ini
lupacode - Belajar CSS Dasar Bagian 5 – Text Styling 2

     Oke selanjutnya ada text-decoration untuk menambahkan dekorasi pada text seperti underline, overline, atau line-through. Contoh penulisannya adalah seperti ini :
P { text-decoration: underline; }
Kita lihat hasilnya menjadi seperti ini

lupacode - Belajar CSS Dasar Bagian 5 – Text Styling 3

    Selanjutnya ada text-transform untuk memaksa tulisan menjadi huruf besar semua, atau kecil semua. dengan menggunkan property lowercase (kecil semua), uppercase (Besar semua), capitalize (kapital pada awal kata) Kita coba pada h1 seperti ini :
h1 { text-transform: uppercase; }
Maka hasilnya akan menjadi seperti ini

lupacode - Belajar CSS Dasar Bagian 5 – Text Styling 4

       Lalu ada lagi selanjutnya yaitu latter-spacing untuk mengatur spasi antar huruf. Contohnya adalah seperti ini p { letter-spacing: 5px; } Sekarang kita lihat hasilnya akan menjadi seperti ini, jarak antar huruf nya akan bertambah

lupacode - Belajar CSS Dasar Bagian 5 – Text Styling 5

    Oke yang terakhir ada word-spacing untuk mengatur jarak antar kata. Kita langsung saja mencobanya pada paragraf lagi P { word-spacing: 50px; } Maka hasilnya akan menjadi seperti ini, jarak antar kata nya bertambah sesuai dengan yang kita inputkan

lupacode - Belajar CSS Dasar Bagian 5 – Text Styling 6
      
     Oke baiklah untuk pembahsan kali ini saya cukupkan sampai disini dulu, jangan lupa kunjungi terus blog lupacode untuk  mendapatkan pembelajaran materi terbaru. Selanjutnya kita akan masuk kedalam materi Belajar CSS Dasar Bagian 6– Background

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon