Pada bagian ini, kita akan membahas salah satu properti penting dalam CSS, yaitu font dan text styling. Konsep pengaturan font dan teks di CSS sebenarnya mirip dengan yang biasa kita temui di aplikasi pengolah kata seperti Microsoft Word, hanya saja penerapannya dilakukan melalui kode.
Persiapan Project
Seperti biasa, kita mulai dengan menyiapkan project terlebih dahulu.
Silakan buka Visual Studio Code, lalu buat sebuah folder baru (bisa di lokasi yang sama dengan project sebelumnya). Setelah itu:
-
Buat file HTML baru
-
Gunakan template HTML dasar dengan menekan tanda
!laluEnter -
Pastikan struktur HTML sudah siap digunakan
Sebelum masuk ke CSS, mari kita bayangkan dulu tampilan website yang akan kita buat.
Gambaran Tampilan Website
Website yang akan kita bangun secara sederhana memiliki struktur sebagai berikut:
-
Header di bagian atas
-
Nama website menggunakan tag
<h1> -
Menu navigasi dengan tiga item:
-
Home
-
Service
-
Contact
-
Setelah struktur HTML dibuat dan disimpan, kita jalankan file HTML tersebut di browser.
Pada tahap ini, tampilan website masih menggunakan font default browser, yang tentu belum sesuai dengan desain yang kita inginkan.
Menggunakan Font dari Google Fonts
Untuk memperindah tampilan, kita akan menggunakan font dari Google Fonts.
Kita bebas memilih font apa saja, namun pada contoh ini kita akan menggunakan font Montserrat.
Langkah-langkahnya:
-
Buka Google Fonts
-
Cari font Montserrat
-
Pilih style Regular
-
Klik Select lalu salin kode
<link>yang disediakan -
Tempelkan kode tersebut di dalam tag
<head>pada file HTML
Kode tambahan ini berfungsi untuk menghubungkan font dari Google Fonts ke website kita.
Menghubungkan CSS External
Walaupun font sudah ditambahkan di HTML, tampilan website belum berubah.
Hal ini karena kita belum mengatur CSS-nya.
Langkah berikutnya:
-
Buat file CSS baru (misalnya:
style.css) -
Hubungkan file CSS ke HTML menggunakan tag
<link> -
Mulai mengatur font menggunakan CSS
Mengatur Font dengan font-family
Untuk mengatur font pada seluruh elemen website, kita bisa menggunakan selector * (bintang).
* { font-family: 'Montserrat', sans-serif; }
Selector * berarti semua elemen HTML akan menggunakan font tersebut.
Setelah disimpan dan direfresh, font pada website akan langsung berubah.
Mengatur Ketebalan dan Ukuran Font
Kita juga bisa mengatur font secara spesifik, misalnya untuk judul <h1>.
h1 { font-weight: 700; font-size: 32px; }
Properti yang sering digunakan:
-
font-weight→ mengatur ketebalan teks (misalnya 400, 500, 700) -
font-size→ mengatur ukuran teks
Jika ingin teks tidak terlalu tebal, kita bisa menurunkannya menjadi 500 atau 400.
Font Style
CSS juga menyediakan properti font-style untuk mengatur gaya teks, seperti:
-
normal -
italic
Contoh:
h1 { font-style: italic; }
Namun jika tidak dibutuhkan, properti ini bisa dihapus agar teks tetap normal.
Text Decoration
Selanjutnya, kita masuk ke text decoration, yang sering digunakan pada teks link (<a>).
Secara default, link memiliki garis bawah (underline).
Jika kita ingin menghilangkannya, gunakan:
a { text-decoration: none; }
Properti text-decoration juga bisa digunakan untuk:
-
Garis bawah
-
Garis tengah
-
Garis atas
-
Kombinasi tertentu
Mengatur Warna Teks
Untuk mengatur warna teks, kita gunakan properti color.
a { color: black; }
Dengan properti ini, warna teks bisa diubah sesuai kebutuhan desain website.
Penutup
Pengaturan font dan text styling merupakan bagian penting dalam CSS karena sangat mempengaruhi kenyamanan dan tampilan visual sebuah website. Dengan properti seperti:
-
font-family -
font-size -
font-weight -
font-style -
text-decoration -
color
kita sudah bisa membuat tampilan teks website menjadi jauh lebih rapi dan profesional.
Pada materi selanjutnya, kita bisa melanjutkan ke pengaturan layout dan styling lanjutan agar website semakin menarik 🚀
