Kita buka dahulu kode dari pelajaran sebelumnya. Disini kita lihat konten paragrafnya masih terlalu besar ya. Jadi kita buka dahulu kode HTML-nya dan kita kurangi masing-masing paragraf menjadi 4 baris saja.

Oke, pertama kita akan membahas mengenai text-align terlebih dahulu. Properti ini mengatur bagaimana cara teks disusun secara horizontal. Nilai default dari properti ini adalah left, artinya teks akan disusun secara rata pada bagian kiri. Kita bisa melihat contohnya pada MDN. Ini adalah sebuah paragraf, dan kita bisa melihat bahwa teks disusun secara rata pada bagian kiri paragrafnya.

Di bagian CSS Demo kita bisa menemukan ada 4 buah nilai text-align yang paling sering digunakan dan kita bisa mengklik nilai tersebut untuk melihat bagaimana efeknya ke paragraf. Misalkan kita klik ke nilai right, maka susunan paragraf akan berubah menjadi rata kanan. Sedangkan kalau kita klik ke center, maka posisi teks akan berubah ke bagian tengah. Dan kalau kita klik ke justify, maka teks akan disusun agar rata baik di bagian kiri maupun bagian kanannya.

Sekarang kita coba pada kode kita. Kita buka file lanjutan.css. Lalu kita tambahkan h1. Kita isikan properti text-align dengan nilai center. Kita simpan dan lihat hasilnya pada browser. Sekarang judul utama kita sudah berubah dan berada pada bagian tengah layar.

Yang perlu kita perhatikan disini adalah, posisi dari teks kita selalu diukur dari ukuran elemen yang bersangkutan. Kita bisa klik kanan dan pilih Inspect. Lalu kita lihat bahwa elemen h1 kita disini ukurannya akan mengambil lebar seluruh layar.

Kita bisa mengubah lebar elemen h1 ini dengan menggunakan properti width. Sebagai contoh saya tambahkan lagi properti width dengan nilai 40%. Dan kita lihat hasilnya sekarang judul utama kita menjadi bergeser ke kiri. Kalau kita inspect lagi, maka kita bisa melihat bahwa sekarang elemen h1 kita hanya menggunakan separuh dari ukuran layar, sehingga posisi rata tengah teksnya berubah menjadi seperti ini.

Hal yang sama akan terjadi apabila kita menggunakan rata kanan.

Kita kembalikan text-align menjadi center dan kita hapus properti width.

Selanjutnya kita akan membahas mengenai properti font-weight. Properti font-weight bisa kita gunakan untuk mengatur tingkat ketebalan dari tulisan pada teks kita. Nilai yang paling sering digunakan adalah normal dan bold. Atau kita bisa juga memberikan nilai dengan menggunakan angka dari 100, 200, 300, dan seterusnya hingga 900. Nilai angka 400 adalah normal, sedangkan nilai 700 adalah bold. Perhatikan bahwa tidak semua jenis font mendukung font-weight dengan nilai 100 hingga 900.

Sebagai contoh, kita akan mengubah font-weight dari judul utama kita. Kita bisa lihat bahwa sekarang judul utama menggunakan tulisan tebal. Kita coba ubah menjadi normal. Kita tambahkan properti font-weight dengan nilai normal.

Kita simpan dan refresh browser. Maka kita bisa melihat tulisan judul utama kita sudah tidak tebal. Sekarang menggunakan huruf normal ya. Kita bisa juga mengganti tulisan normal ini menjadi angka 400. Dan hasilnya tetap sama.

Sedangkan kalau kita ganti menjadi angka 700, maka tulisannya akan kembali seperti semula.

Kita coba ganti menjadi angka 900. Dan ternyata tidak ada perubahan ya. Jadi apabila font ini tidak mendukung font-weight 900, maka browser secara otomatis akan mencarikan nilai lain yang paling dekat dengan 900. Kebetulan pada font ini adalah 700. Maka nilai font-weight secara otomatis diganti menjadi 700.

Selanjutnya kita akan mempelajari mengenai properti line-height. Properti line-height digunakan untuk mengatur tinggi baris dari teks. Kita bisa melihat dari contoh MDN, secara default nilai line-height adalah normal. Disini kita bisa melihat bahwa tinggi barisnya akan mengikuti ukuran dari font yang sedang digunakan.

Pada contoh kedua, kita memberikan nilai 2,5 pada line-height. Berhubung nilai 2,5 tidak diikuti dengan satuan, maka artinya kita memberikan tinggi baris dengan nilai 2,5 kali dibandingkan dengan normal. Bisa kita lihat hasilnya dengan cara mengklik nilai ini. Bisa kita lihat pada contoh bahwa setiap barisnya akan menjadi lebih tinggi. Kita bisa melihat ada jarak pada bagian atas dan bawah dari teks.

Contoh ketiga adalah 3em, artinya tinggi barisnya tiga kali lipat. Bisa kita lihat pada contoh bahwa tinggi barisnya akan sedikit lebih besar daripada contoh sebelumnya di 2,5. Di video berikutnya kita akan membahas lebih lanjut mengenai satuan em.

Contoh keempat adalah 150%. Masih mirip dengan contoh-contoh sebelumnya, hanya berbeda di satuannya saja ya. Disini tinggi barisnya akan menjadi 1,5 kali dibandingkan normal.

Dan contoh terakhir adalah 32 pixel. Ini adalah satu-satunya contoh disini yang tidak menggunakan perbandingan ke tinggi normal. Satuan 32 pixel disini bukan berarti tepat 32 pixel. Secara pengguna browser masih dapat melakukan zoom in dan zoom out, maka browser pun tetap memperbesar ataupun memperkecil tinggi baris. Bisa kita contohkan disini akan saya perbesar. Dan saya perkecil.

Sekarang kita coba pada kode kita. Saya tambahkan selector baru p. Misalkan saya ingin agar jarak antar barisnya double, maka saya beri properti line-height dengan nilai 2. Kita bisa lihat hasilnya sekarang jarak antar baris pada paragraf kita sudah semakin besar.

Dan kalau saya ganti nilainya menjadi 1, maka baris pada paragraf menjadi rapat.

Sekarang kita coba beri nilai dengan satuan pixel. Kita coba beri nilai 5 px. Nah, jadinya berantakan ya. Mengapa? Karena font yang kita gunakan tingginya lebih besar daripada 5 pixel, sedangkan tinggi baris kita hanya 5 pixel. Jadinya tulisan pada baris berikutnya akan menimpa tulisan pada baris sebelumnya.

Kita ganti nilainya menjadi 20 pixel. Nah sekarang tulisannya sudah lebih rapi, karena tinggi barisnya sudah cukup nyaman untuk dilihat.

Nah, kalau line-height mengatur jarak teks secara vertikal, apakah ada properti yang mengatur jarak teks secara horizontal? Jawabannya adalah iya. Nama propertinya adalah letter-spacing. Bisa kita lihat dokumentasinya di MDN. Nilai pada letter-spacing ini masih mirip dengan line-height. Namun kegunaannya adalah untuk mengatur jarak antar huruf secara horizontal.

Kita coba tambahkan di kode kita, pada selector h1. Kita beri properti letter-spacing dengan nilai 5 pixel. Kita bisa lihat hasilnya, jarak antar huruf pada judul utama kita menjadi lebih besar.

Properti terakhir yang akan kita bahas dalam video ini adalah text-decoration. Cara menggunakan properti ini sedikit lebih rumit dibandingkan dengan properti lain yang telah kita pelajari. Secara properti text-decoration dapat menerima 4 jenis nilai sekaligus.

Pertama kita coba tambahkan dahulu properti text-decoration pada h1. Kita beri nilai underline yang artinya kita akan memberikan garis bawah pada judul utama kita. Kita simpan dan lihat hasilnya pada browser. Sekarang judul utama kita sudah memiliki garis bawah.

Kita bisa mengubah posisi dari garis ini dengan menggunakan nilai lain, yang bisa kita lihat pada auto-complete Atom. Misalkan kita menggunakan overline, maka garisnya akan berada di bagian atas. Dan pilihan lain adalah line-through, dimana garisnya akan mencoret teks kita.

Kita ubah text-decoration kembali ke underline.

Properti berikutnya yang bisa kita tuliskan di text-decoration adalah warna dari garis tersebut. Seperti yang sudah kita pelajari pada video sebelumnya, kita bisa menuliskan warna dengan menggunakan keywordnya, kode hexadecimalnya, ataupun dengan menggunakan fungsi RGB. Sebagai contoh saya tambahkan keyword orange, maka sekarang garis tersebut akan berubah menjadi berwarna oren.

Nilai berikutnya yang bisa kita tambahkan adalah style dari text-decoration. Kita bisa melihat dari dokumentasi MDN, bahwa style yang bisa kita gunakan adalah solid, double, dotter, dashed, dan wavy. Style ini masih mirip dengan style yang digunakan pada properti border.

Kita coba ya. Misalkan dashed. Maka garisnya akan menjadi garis putus-putus. Kalau wavy maka akan membentuk garis berombak. Sedangkan kalau dotted maka akan menggunakan titik titik.

Dan nilai terakhir yang bisa kita masukkan disini adalah ukuran dari garis tersebut. Sebagai contoh saya masukkan nilai 10 pixel. Maka ukuran titik yang membentuk garis bawah akan menjadi semakin besar.

Text-decoration juga sering digunakan untuk menghilangkan garis bawah pada anchor tag. Sebagai contoh, apabila saya menambahkan link pada paragraf pertama. Maka bisa dilihat bahwa secara default, browser akan menampilkan garis bawah pada link tersebut.

Kebanyakan design situs jaman sekarang sudah tidak menyukai keberadaan garis bawah pada link. Bagaimana cara menghilangkannya? Mudah ya. Pertama kita tambahkan dahulu selector anchor. Lalu kita isikan properti text-decoration dengan nilai none. Nah sekarang link pada situs kita sudah tidak menggunakan garis bawah.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.