Formating Teks dan Paragraf dengan CSS

Aplikasi CSS untuk Font Family, font size, dan color
CSS font digunakan untuk mengatur tampilan font atau huruf pada website.
CSS Font Family
Didalam CSS terdapat 2 tipe nama CSS font family, yaitu : 1. Generik family : Kelompok font family dengan tampilan yang sama (seperti ―serif‖ atau ―monoscope‖) 2. Font family : Font family khusus / tertentu ( seperti ―times new roman‖ atau ‗arial‖) Font family merupakan pengaturan jenis huruf yang akan digunakan,
Contoh pemakaian :

p{font-family:"Times New Roman", Times, serif;}

CSS Font Size
Didalam mendesain web, penting untuk mengatur ukuran. Dengan menggunakan property ini, akan memudahkan untuk pengaturan ukuran font yang berbeda-beda dalam satu halaman website. Nilai font-size bisa menjadi ukuran absolut, atau relatif.

body {font-size: 13px; } // satuan pixel body {font-size: 1.5em; } // satuan em body {font-size: 100%; } // satuan %

Contoh diatas bisa diaplikasikan di browser firefox, safari dan chrome tapi tidak bisa digunakan di aplikasi internet explorer. Nah untuk itu banyak developer web menyarankan menggunakan em daripada pixel. 1em sama dengan 16 pixel. Ukurannya dihitung dari pixel ke dalam em menggunakan rumus pixels/16=em.
Contoh :

h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */

CSS Font Variant
Contoh Font Variant adalah membuat font besar semua, dimana pada css text terdapat text transformation. Contoh syntak CSS Font Variant:

p.normal {font-variant: normal; } // tulisan normal p.besar {font-variant: small-caps; } // TULISAN BESAR SEMUA

5.2.2. Aplikasi CSS untuk Bold, Italic strikethrough dan Underlining
CSS Font Weight (Bold)
Penggunaan yang sering ditemukan pada style font weight, yakni membuat huruf tebal. Berikut sintak untuk CSS font weight:

p.normal{font-weight: normal;} // font normal p.tebal{font-weight: bold; } // hasil tebal

Sebagai alternatif, sebenarnya bisa juga menggunakan tag <strong> atau <b> dimana fungsinya juga sama yakni membuat tulisan tebal.
CSS Font Style (Italic, Oblique)
Properti Font Style banyak digunakan untuk menentukan style dari teks yang akan ditampilkan Berikut sintaks CSS font style:

p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}

Strikethrough
Untuk menciptakan teks dengan strikethrough pada CSS , digunakan value line-through pada property text-decoration. Kode ini dapat ditulis inline atau external style sheet dengan hasil yang sama.
Inline

<p style="text-decoration:line-through;">This text will appear with a line across it!</p>

External Style Sheet

p {text-decoration: line-through;}

Jika aturan di atas digunakan maka dokumen HTML yang menggunakan tag <p> akan mendapatkan efek strikethrough. Underlining Menggarisbawahi teks yang bukan link dapat dikatagorikan sebagai ide yang buruk karena akan membingungkan pengunjung. Tetapi jika ingin melakukannya , dapat digunakan CSS.
Contoh pada HTML:

The good way: <span class="uline">underlined text</span> <br> The bad way: <u>underlined text</u>

Contoh pada CSS :

span.uline { text-decoration: underline; }

5.2.3. Pengaturan spasi antar huruf
Cara Mengatur Lebar Spasi Antar Huruf dengan CSS
Nilai yang digunakan untuk mengatur spasi atau jarak antar huruf dan bisa berupa pixel, persen, em atau satuan ukuran text lainnya.
Jika kita memberikan nilai positif untuk letter-spacing, spasi antar karakter akan semakin menjauh. Untuk membuat spasi antar karakter semakin berdekatan, gunakan nilainegatif. Berikut adalah contoh penulisan properti letter-spacing:

h1 { letter-spacing: 2px; } h2 { letter-spacing: -3px; }

Nilai letter-spacing: normal bisa digunakan untuk membuat spasi antar karakter kembali ke nilai awal (nilai default).
Cara Mengatur Lebar (spasi) Antar Kata
Selain pengaturan spasi antar karakter, CSS juga menyediakan cara untuk mengatur jarak atau spasi antar kata dengan properti word-spacing. Sama seperti letter-spacing , kita bisa menggunakan nilai positif atau negatif untuk memperlebar atau memperkecil spasi antara sebuah kata dengan kata lainnya. Berikut adalah contoh penulisan properti word-spacing:

h1 { word-spacing: 20px; } h2 { word-spacing: -30px; }

Nilai word-spacing: normal bisa digunakan untuk membuat spasi antar kata kembali ke nilai awal (nilai default).
5.2.4. Formating paragraf dengan CSS:
Seperti yang telah di singgung sebelumnya, secara teknis dasar sebuah paragraf yang dibuat dalam html yang ditulis secara kode <p>isi paragraf</p>. Secara default Paragraf akan ditampilkan sama yaitu : Disajikan rata kiri dan tiap paragraf ditampilkan dengan pemisah baris Untuk mengubah arah tulisan sebuah paragraf yang semula rata kiri menjadi rata kanan atau rata kiri kanan, bisa digunakan perintah berikut :

p.ratakanan { text-align:right; } p.ratakirikanan { text-align:justify; } p.ratatengah { text-align:center;}

5.2.5. CSS Box Model
Didalam html, semua elemen seperti p, div, h dan lain-lain pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css, istilah ―model kotak / box‖ digunakan ketika berbicara tentang design dan tata letak.
Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan untuk membuat jarak antara yang satu dengan yang lainnya sehingga kotak-kotak kolom
tidak tampil menyatu dan tampak lebih bagus untuk di lihat. Berikut ilustrasi box model :

Penjelasan :

• Margin : memungkinkan untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan) 
• Border : sama halnya dengan margin memungkinkan untuk memberi jarak bedanya border dapat didefinisikan warna background 
• Padding : memungkinkan untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content 
• Content : adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya

5.2.6. Aplikasi border ke paragraf
CSS border properties digunakan untuk mengatur penampilan garis pembatas yang dbuat pada tabel. Property border width digunakan untuk mengatur lebar border yang akan dibuat dapat menggunakan satuan pixel atau menggunakan properties thin, medium atau thick.
Border Color digunakan untuk mengatur warna border pendefinisian dapat menggunakan (red, green dll) atau RGB (255,0,0) atau Hex (#ff000)

Share this post