Ads by Yasya El Hakim
Tutorial CSS Tingkat Dasar: Margin dan Padding - Bagian 4

Kalian dapat mengubah ukuran dan bentuk dari teks pada setiap halaman web dengan menggunakan beberapa property.




font-family

font-family adalah property untuk mengubah jenis font seperti, Times New Roman, Arial, Calibri, Verdana, dll.

Browser dari user harus dapat menemukan font yang kalian tentukan melalui halaman web. Terdapat beberapa font bawaan Browser yang paling sering digunakan seperti Arial, Verdana dan Times New Roman, tetapi kalian juga dapat menentukan lebih dari satu font yang dipisahkan dengan tanda koma ",". Tujuan dari penggunaan tanda koma pada nilai dari property font-family adalah jika pengguna tidak memiliki font pertama yang kalian tentukan, maka browser akan mencari daftar font sampai bisa menemukan font yang kalian tentukan. Jadi property seperti font-family: arial, helvetica, serif - akan berguna untuk mencari font pertama yaitu Arial, jika browser tidak dapat menemukannya, maka Browser akan mencari font Helvetica, dan yang terakhir adalah serif.

Catatan: Jika nama font itu lebih dari satu kata, maka kalian harus menggunakan tanda petik dua ("), contoh: font-family: "Times New Roman".

Kalian juga dapat menggunakan banyak sekali pilihan Font. Untuk pembelajaran dasar ini, saya sarankan agar kalian tetap menggunakan standarnya saja.

font-size

font-size adalah property untuk mengatur ukuran font. Harap berhati-hati dengan property yang satu ini - teks seperti Heading tidak boleh menggunakan atau berupa paragraf (p) kemudian diatur ukuran font nya, tetapi kalian harus menggunakan tag Heading dari h1 sampai h6.

font-weight

font-weight adalah property untuk mengatur ketebalan font, tebal (Bold) atau normal. Contoh, font-weight: bold atau font-weight: normal. Tetapi nilai property selain bold dan normal seperti bolder, lighter, 100, 200, 300, 400 (itu sama seperti font-weight: normal) dan 500, 600, 700, 800, atau 900 (sama seperti font-weight: bold).

Jika kalian ingin melihat perbedaannya, silahkan bereksperimen dengan nilai dari property font-weight. Tetapi perlu diingat, bahwa beberapa browser lama biasanya tidak mendukungnya.

font-style

font-style adalah property untuk mengatur teks apakah itu miring (italic) atau tidak. Contoh: font-style: italic atau font-style: normal.

text-decoration

text-decoration adalah property untuk mengatur teks jika kalian ingin mengatur garis  pada font.

Contoh:
  • text-decoration: underline, untuk membuat garis bawah.
  • text-decoration: overline, untuk membuat garis atas.
  • text-decoration: line-through, untuk mencoret teks (sama seperti Strike-Throught).

Biasanya property ini dapat kalian gunakan untuk mengatur tampilan teks link agar tidak memiliki garis bawah (underline). Contoh, text-decoration: none.

Garis bawah (Underline) seharusnya hanya digunakan untuk teks yang berupa link.

text-transform

text-transform adalah property untuk mengatur apakah teks itu besar atau kecil.

Contoh:
  • text-transform: capitalize, membuat huruf pertama pada teks menjadi huruf besar semua.
  • text-transform: uppercase, membuat semua teks menjadi huruf besar semua.
  • text-transform: lowercase, membuat semua teks menjadi kecil semua.
  • text-transform: none, tidak ada :D.

Jadi, contoh penerapannya akan seperti berikut:

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}


Text Spacing (Jarak Teks)

Sebelum kita masuk ke bagian selanjutnya, alangkah baiknya jika kita memahami sedikit tentang jarak teks.

Kalian dapat menggunakan property letter-spacing dan word-spacing untuk mengatur jarak setiap huruf maupun angka. Nilai dari kedua property tersebut dapat berupa angka atau normal.

Property line-height dapat kalian gunakan untuk mengatur jarak atas dan bawah teks tanpa mengubah ukuran font. Nilai dari properti ini adalah berupa angka, presentase, ataupun normal.

Property text-align dapat kalian gunakan untuk mengatur perataan teks, ke kanan (right), kiri (left), tengah (center), ataupun sama rata (justify).

Property text-indent dapat kalian gunakan untuk memberikan tab atau ruang pada teks yang ada di baris pertama. Biasanya, penggunaan property ini sering digunakan dalam media cetak, tetapi tidak jarang juga digunakan pada halaman Web.

p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}


Sebelumnya: Tutorial CSS Tingkat Dasar: Warna - Bagian 3
Selanjutnya: Tutorial CSS Tingkat Dasar: Margin, Padding, dan Border - Bagian 5
Daftar isi: Tutorial CSS Tingkat Dasar

0Komentar

Sebelumnya Selanjutnya