property di CSS

Sumber : tempatberbagi.com

Sesuai dengan permintaan seorang teman, akhir publish juga postingan tentang tutorial css yang ketiga yaitu mengenal property css dalam memanipulasi pemformatan text. Sebelum anda belajar dan mengenal property, sebaiknya anda sudah mengetahui tentang selector di css dan cara mengkoneksikan CSS dengan HTML terlebih dahulu. Untuk penulisan property biasakan dengan menggunakan huruf kecil. Setiap property akan memiliki sebuah nilai/isi atau yang sering disebut dengan value. Kalo masih bingung, silahkan baca kembali tentang selector. Untuk belajar css sesungguhnya tidaklah susah, kita hanya diharuskan untuk menghafal dan mengetahui fungsi dari property-property yang ada di css. Jumlah property yang ada di css lumayan banyak, mungkin kalo dihitung mencapai puluhan property. Dan itu harus anda hafalkan dan dimengerti kalo ingin bisa css. Untuk kali ini kita akan mengulas tentang pemformatan text saja, supaya tidak terlalu banyak langsung menghafalkan property.  Ok, kita langsung saja mengulas property-property yang digunakan untuk pemformatan text:

• font-family

Digunakan untuk mendefinisikan jenis-jenis tulisan/text, misalnya seperti arial, georgia, atau yang lainnya

• font-size

Digunakan untuk mendifinisikan ukuran tulisan/text, ukuran dapat menggunakan satuan px, em, %

• font-style

Digunakan untuk mendefinisikan cetak miring pada sebuah tulisan atau text, value yang digunakan bisa berupa italic

• font-weight

Digunakan untuk mendifinisikan cetak tebal pada sebuah tulisan/text

• letter-spacing

Digunakan untuk memberikan jarak antara satu karakter dengan karakter lainnya, ukuran berupa px

• line-height

Digunakan untuk memberikan jarak antara satu baris kata/kalimat dengan baris yang berikutnya

• color

Digunakan untuk memberikan warna pada tulisan atau text

• text-align

Digunakan untuk memberikan posisi pada tulisan atau text. Value posisi nanti ada empat jenis yaitu left(kiri), right(kanan), center(tengah), dan justify(rata kiri dan kanan)

• text-tranform

Digunakan untuk mengubah tulisan atau text menjadi kapital atau sebaliknya. Valuenya ada tiga jenis yaitu capitalize (mengubah huruf depan menajadi huruf besar), lowercase (mengubah tulisan/text menjadi huruf kecil), uppercase (mengubah tulisan/text menjadi huruf besar)

• text-shadow

Digunakan untuk memberikan bayangan (shadow) pada tulisan/text. Valuenya nanti ada empat yaitu bil1 digunakan untuk horisontal shadow, bil2 untuk vertikal shadow, bil3 untuk blur, dan terakhir untuk warna shadow. example: text-shadow : bil1 bil2 bil3 warna;

• text-decoration

Digunakan untuk memberikan dekorasi pada sebuah tulisan atau text. Value ada empat jenis yaitu: blink (text berkedip), underline (garis dibawah text), line-through (garis ditengah text), overline (garis di atas text)

• text-indent

Digunakan untuk menjorokan text kedalam atau ke kanan pada baris pertama dalam sebuah paragraf. value berupa bilangan dengan satuan pixel(px)

Kurang lebih ada sekian property yang sering digunakan dalam pemformatan text, sebenarnya masih ada lagi tetapi tidak dapat berjalan baik di semua browser. Sedangkan property diatas hampir semua dapat di baca oleh browser major (safari, mozilla, chrome, opera, ie)
Supaya lebih afdol lagi mari kita coba property-property diatas. Ok, kita akan coba menggunakan selector tag standar HTML dengan menggunakan koneksi internal (kerjakan script di bawah tag tutup title).

1 2      3 4 5 6 7 8 9 10 11 12 13 14

<style type="text/css"> p{     font-family:Georgia, "Times New Roman", Times, serif; /* jenis huruf georgia */     font-size:12px; /* ukuran huruf */     font-style:italic; /* cetak miring */     color:#03F; /* warna huruf */     text-align:left; /* posisi kalimat */     letter-spacing:2px; /* jarak antara satu huruf dengan huruf berikutnya */     line-height:15px; /* jarak baris kalimat */     text-transform:uppercase; /* huruf bersar */     text-indent:30px; /* menjorok ke kanan pada baris pertama */     text-decoration:underline; /* dekorasi garis bawah */ } </style>

Lalu untuk pemanggilan kerjakan di dalam tag body:

1 2 3 4

<p>Belajar dasar-dasar penggunaan pemformatan text.<br/>   Belajar css itu tidak susah yang penting kita dapat menghafal dan mengerti     penggunaan propery.<br/> Jadi sebelum belajar css sisakan sedikit otak anda untuk menampung property-property yang ada.<br/> selamat mencoba!</p>

Untuk outputan-nya akan tampak seperti gambar di bawah ini:

Sekian dulu untuk tutorial css kali. Apakah sudah bisa dipahami? Kalo belum silahkan bertanya di form komentar atau melalui Menu Contact. Jika merasa sudah dapat dimengerti silahkan dicoba dong akh!