Mempercantik Teks Dengan Menggunakan CSS || BLC TELKOM KLATEN

A. PENDAHULUAN

  • Pengertian

Font sangat penting agar membuat pembaca tertarik dan  nyaman. Menggunakan font yang mudah dibaca adalah penting. Font menambah nilai pada teks Anda. Penting juga untuk memilih warna dan ukuran teks yang benar untuk font.

  • Latar belakang masalah
Di karenakan Font pada CSS sangatlah penting, dengan menggunakan Font pada CSS akan lebih menarik dan nyaman saat membaca.

B. MAKSUD DAN TUJUAN

Menambahkan Font pada halaman website, dan tujuannya adalah agar lebih nyaman dan menarik saat di baca.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Mempelajari CSS font di w3schools

D. TARGET DAN HASIL YANG DIHARAPKAN

Dapat mempercantik teks dengan menggunakan font pada CSS.

E. METODE PELAKSANAAN

- Membaca referensi
- Mempraktikkan
- Mengerjakan Try It Your Self

F. ALAT DAN BAHAN

- Laptop
- Koneksi internet

G. TARGET WAKTU

13.00 - 16.00

H. TAHAPAN PELAKSANAAN

- Font CSS

Font sangat penting agar membuat pembaca tertarik dan  nyaman. Menggunakan font yang mudah dibaca adalah penting. Font menambah nilai pada teks Anda. Penting juga untuk memilih warna dan ukuran teks yang benar untuk font.

Keluarga Font Umum

Di CSS ada lima keluarga font generik:

1. font serif memiliki goresan kecil di tepi setiap huruf. Mereka menciptakan rasa formalitas dan keanggunan

2. Font sans-serif memiliki garis yang bersih (tidak ada goresan kecil yang terpasang). Mereka menciptakan tampilan modern dan minimalis.

3. Font monospace di sini semua huruf memiliki lebar tetap yang sama. Mereka menciptakan tampilan mekanis.

4. Font kursif meniru tulisan tangan manusia.

5. Font fantasi adalah font dekoratif/menyenangkan.

Semua nama font yang berbeda milik salah satu keluarga font generik.

Perbedaan antara font serif dan sans-serif


- Properti font-family CSS
Di CSS, kami menggunakan font-family properti untuk menentukan font teks.

Properti font-family harus menampung beberapa nama font sebagai sistem "fallback". Yang berarti jika browser tidak mendukung font pertama, browser mencoba font berikutnya, dan seterusnya.

Cara menggunakan properti font-family pada CSS yang dilakukan pertama adalah menuliskan jenis font yang diinginkan, dan akhiri dengan jenis font dari generic family, untuk membuat browser memilih font yang serupa dalam generic family, jika tidak ada font lain  yang tersedia.

Catatan : Jika ingin menambahkan font lebih dari satu kata, harus dalam tanda petik, seperti: "Times New Roman",

Penulisan properti font-family yang terdiri lebih dari satu jenis font di tentukan dalam daftar yang di pisahkan koma.

Contoh menentukan font untuk tiga paragraf :


CSSNYA :

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

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

HTMLNYA :

<h1>CSS font-family</h1>

<p class="serif">Ini adalah paragraf, yang ditampilkan dengan font Times New Roman.</p>

<p class="sansserif">Ini adalah paragraf, yang ditampilkan dengan font Arial.</p>

<p class="monospace">Ini adalah paragraf, yang ditampilkan dengan font Lucida Console.</p>

Maka Hasilnya akan seperti ini :



Menentukan jenis font "impact" pada paragraf:

CSSNYA :

p.impact {
  font-family: Impact, Charcoal, sans-serif;
}

HTMLNYA :

<h1>CSS Font-family</h1>
<p class="impact"> Ini adalah paragraf, yang ditampilkan dengan font Impact.</p>

HASIL :



I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

-

J. KESIMPULAN YANG DIDAPAT

Dengan menggunakan font ketika membuat sebuah artikela ataupun yang lainnya sangatlah bagus, dikarenakan dengan font tersebut pembaca akan lebih tertarik dan nyaman.

K. REFERENSI

- w3schools