Belajar CSS Part 5: Format Text Dalam CSS


Belajar CSS Part 5: Format Text Dalam CSS 1

IRVAN GEN – Selamat datang. Salam jumpa kembali di pertemuan yang ke-6 dalam sesi belajar CSS. Sebelumnya kita pernah membahas Cara Mengatur Hyperlink dengan CSS. Pada pertemuan yang ke-6 saya akan mengulas Format Text Dalam CSS.

Memodifikasi text dalam penggunaan css dengan tujuan agar format text dapat sesuai dengan apa yang kita inginkan dan kita butuhkan.

Contoh seperti mengatur text menjadi rata kanan dan kiri, mengatur jarak indent text, mengatur format huruf dengan uppercase (huruf besar atau huruf kecil), warna text, mengatur dekorasi pada text dan masih banyak lagi.

Beberapa syntax CSS yang bisa digunakan untuk mengatur format text:

#color : Untuk memberi warna pada text, value diisi dengan kode warna atau nama warna. Contoh nama warna = ‘red‘ dan kode warna = ‘#f2f2f2f2

#text-align : Digunakan dalam menentukan posisi align pada text, value yang bisa diisi adalah:

  • center : untuk menentukan posisi text rata tengah
  • left : menentukan posisi text menjadi rata kiri
  • right : menentukan posisi text menjadi rata kanan
  • justify : menentukan posisi text menjadi rata kanan dan kiri.

#text-decoration : Digunakan untuk memberi / mengatur dekorasi text. text-decoration memiliki value diantaranya ialah:

  • none : menentukan bahwa text tidak memiliki dekorasi.
  • overline : membuat text untuk memiliki garis pada bagian atas.
  • line-through : untuk membuat garis yang mencoreng dibagian text.
  • underline : untuk memberi garis bawah pada text.

#text-transform : Digunakan untuk mengatur huruf kapital, text-transform memiliki value diantaranya ialah:

  • uppercase : untuk menentukan text menjadi huruf besar.
  • lowercase : untuk menentukan text menjadi huruf kecil.
  • capitalize : untuk menentukan huruf awal pada tiap kata menjadi huruf besar.

#text-indent : Digunakan untuk mengatur jarak alinea text, value yang bisa diisi berupa nilai pixel dan lainnya, sesuai kebutuhan masing – masing.

#text-spacing : Digunakan untuk mengatur jarak antar karakter text, value yang dapat diisi berupa nilai pixel.

#word-spacing : Digunakan dalam mengatur jarak antar baris text, value diisi dengan nilai.

#text-shadow : Digunakan dalam mengatur efek bayangan text, value yang dapat diisi yang pertama mengisi nilai untuk jarak kiri dan kanan, ke-2 mengisi jarak atas dan bawah, yang ke-3 mengisi warna. Contoh penulisannya : 4px 9px red.

#line-height : Digunakan untuk mengatur jarak antar baris text, value diisi dengan nilai.

#vertical-align : Digunakan untuk mengatur text dalam bentuk vertikal.

Cara Mengubah Warna Text dengan CSS

Seperti biasa dalam setiap pertemuan kita akan praktik langsung, untuk contoh menguba warna text, teman – teman silahkan sediakan file index.html dan style.css.

Dibawah ini saya sudah menulis kode programnya

index.html

style.css

Hasilnya …

Cara Mengubah Warna Text dengan CSS - #IRVANGEN
Cara Mengubah Warna Text dengan CSS – #IRVANGEN

Dapat diperhatikan kembali kode program diatas, class warna_tulisan mempunya nilai warna orange.

Cara Penggunaan text-align dengan CSS

index.html

style.css

Hasilnya …

Penggunaan text-align dengan CSS - #IRVANGEN
Penggunaan text-align dengan CSS – #IRVANGEN

Tutorial CSS Mengatur Format Text dengan CSS

index.html

style.css

Hasilnya …

Mengatur Format Text dengan CSS - #IRVANGEN
Mengatur Format Text dengan CSS – #IRVANGEN

Untuk saat ini sampai disini dulu, selebihnya silahkan kamu kembangkan sendiri. Tutorial CSS dasar kita bahas di pertemuan selanjutnya.

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Mengatur Format Text dengan CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Income Search:

  • cara mengatur posisi text pada html
  • mengatur posisi text dengan css
  • cara mengatur letak tulisan di html
  • format text dengan css
  • cara mengatur posisi tulisan di html
  • mengatur posisi text pada html
  • css mengatur semua paragraf
  • cara pempormatan css html
  • cara mengatur tulisan di css
  • css format teks

Nilai kualitas konten


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *