Tutorial CSS ( Cascading Style Sheet ) dan Penjelasan Border & Typografhi

Assalamualaikum wr.wb

Selamat malam sahabat blogger update lagi ni

Belajar Di Perantauan

kali ini kita akan membahas tentang pengunaan border pada CSS dan Typografi. pastinya sudah tidak asing lagi bagi kita dengan kata-kata CSS, tapi tata cara penggunaan sangat banyak sekali, salah satunyanya BORDER.

BORDER

Pada property BORDER digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property yang harus teman-teman set, yaitu color, style, width.

border-color : black;

border-style : solid;

border-width : 5px;

Namun teman-teman juga dapat menggunakan CSS shorthand sehingga menjadi seperti berikut :

border : width style color

Jadi jika kita ubah contoh kode di atas menjadi CSS shorthand, kodenya menjadi seperti berikut :

border : 5px solid black

cobalah tambahkan kode tersebut pada tutotial css yang sebelumnya , PENGUNAAN MARGIN DAN PADDING. dan yang akan di dapatkan adalah seperti berikut :

Sama halnya dengan padding, penambahan property border juga akan merubah ukuran dari box. Jadi, seperti yang di jelaskan sebelumnya. Ketika tema-teman ingin membuat ukuran lebar box tetap 100px, maka teman-teman harus menghitung ulang width dari box tersebut.

Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi box, artinya jika kita tentukan ukuran boorder sebesar 5px, maka 10px ( untuk width, karena 5px untuk left, dan 5px untuk right ) akan di tambahkan pada ukuran box tersebut, sehingga ukuran box tersebut kemballi menjadi 110px.

untuk itu kita kurangi width dari box tersebut menjadi 70 px ( width ) + 20px ( padding ) 10 px (border) 100px.

Dalam dunia CSS kasus seperti ini disebut dengan box-model. terdapat dua property yang mempengaruhi ukuran dari box tersebut yaitu padding dan border.

TYPOGRAPHY

Secara default ( bawaan ), halaman web yang akan kita buat menggunakan font standar yaitu Time Nesw Roman. namun teman-teman dapat merubahnya dengan property font-family. Berikut Contoh penggunaan property font-family :

font-family:calibri

Namun perlu diperhatikan untuk memberi lebih dari satu jenis font yang akan kita tentukan, misalnya kita akan memberikan font-family dengan calibri. maka pada PC dengan Sistem Operasi Linux, tidak akan di temukan font-tersebut.

Untuk itu temn-teman dapat memberikan lebih dari satu jenis font, font-font yang di berikan selanjutnya akan menjadi pengganti ketika font sebelumnya tidak di temukan. Contohnya :

font-family:calibri, arial, tahoma, verdana, sans-serif;

Ketika font jenis calibri tidak ditemukan, maka yang akan digunakan adalah Arial , ketika tidak di temukan Arial maka yang akan digunakan adalah tohama , begitu seterusnya sampai kita tentukan jenis font yang digunakan, sans-serif atau serif dan browser akan menggunakan dengan jenis yang di sebutkan ( serif atau sans-serif ).

Ketika nama font memiliki spasi, maka teman-teman harus memberikan tanda petik/kutip pada nama font tersebut. Misalnya "segae ui".

Untuk menentukan ukuran font, kita gunakan property font-size :

font-size:12px;

Untuk dapat menggunakan satuan pt ( point ) untuk ukuran font :

font-size:12pt;

font yang kita gunakan pun dapat di tentukan ketebalannya dengan menggunakan property font-weight. Nilai yang bisa di pakai pada property ini adalah normal,bold.

font-weight:bold;

Buka tidak mungkin untuk mengatur kerning atau jarak antar huruf. Dalam CSS kita bisa merubah jarak antar hurufdengan property letter-spacing.

laetter-spacing:15px;

Semakin besar nilai pixel yang diberikan semakin jauh jarak antar huruf. teman-teman pun dalam menggunakan nilai negatig untuk memperdekat jarak antar huruf.

letter-spacing:-2px;

Sedangkan unutk memberikan jarak anatar baris kita gunakan property line-height.

line-height:30px;

Dan untuk membuat text rata kana, tengah, kiri, kita gunakan property text align. nilai yang dapat digunakan adalah right, center, left dan justify untuk rata kiri kanan.

text-align:center;

Cobalah untuk bermain dengan property tersebut dan perhatikan perubahan yang di dapatkan. Nah bagaimana ,teman-teman dengan penjelasan di atas , sudah paham kan dengan penggunaan border dan typograpphy, mudah-mudahn bermamfaat , silahkan di Share !!!.

Share this post