Percantik Teks di Website dengan CSS (Font Properties)

Halo teman-teman!

Setelah kemarin kita belajar tentang warna di CSS, kali ini kita akan belajar sesuatu yang tidak kalah serunya, yaitu bagaimana mempercantik tulisan atau teks di halaman website kita dengan CSS.

Kamu tentu pernah melihat tulisan di website yang keren-keren, kan? Ada yang besar, kecil, tebal, tipis, bahkan ada juga yang menggunakan gaya tulisan unik. Nah, semuanya bisa kamu lakukan sendiri loh, dengan CSS!

font-properties

Mengenal Font dalam CSS

Di CSS, ada banyak cara untuk mengubah tampilan tulisan atau teks. Berikut beberapa hal dasar yang perlu kamu ketahui:

1. Mengubah Ukuran Teks (font-size)

Ketika membuat website, kamu pasti ingin beberapa teks tampil lebih besar, seperti judul, dan beberapa teks lain lebih kecil, seperti isi paragraf. Di CSS, kita pakai yang namanya font-size untuk mengubah ukuran teks.

Contoh penulisannya begini:

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

Kalau kamu tulis seperti itu, judul (h1) akan menjadi lebih besar daripada paragraf (p).

Ukuran dalam Pixel (px) dan Point (pt)

Kamu mungkin penasah nih, apa bedanya px dan pt?

  • Pixel (px): Ini yang paling sering dipakai di website. Ukurannya sangat kecil, sekitar 0,26 mm.

  • Point (pt): Ini sedikit lebih besar dari pixel, sekitar 0,35 mm. Biasanya dipakai dalam dokumen seperti di Microsoft Word.

Misalnya, ukuran font di Word yang sering kamu pakai seperti 12, 14, atau 16, sebenarnya itu pakai satuan point.

Ukuran Relatif: em dan rem

Selain px dan pt, ada ukuran lain yang disebut em dan rem. Ini unik, karena ukurannya tergantung pada ukuran font lainnya.

  • em: Tergantung ukuran teks dari elemen induknya.

  • rem: Tergantung pada ukuran font di elemen paling utama (biasanya elemen HTML).

Contoh pemakaiannya begini:

html {
    font-size: 16px; /* ukuran dasar */
}

h2 {
    font-size: 2rem; /* 2 kali ukuran dasar = 32px */
}

Kalau ukuran dasar HTML berubah, otomatis h2 juga ikut berubah.

Apa Bedanya em dan rem?

Kalau kamu menggunakan em, ukuran teks akan bergantung pada ukuran elemen induknya. Tapi kalau pakai rem, ukurannya bergantung pada elemen HTML yang paling atas. Jadi, rem biasanya lebih mudah dipakai karena tidak bingung dengan elemen induk lainnya.

Membuat Teks Tebal dengan Font-weight

Nah, kalau kamu ingin tulisan jadi lebih tebal atau tipis, kita gunakan font-weight. Ada beberapa cara untuk menggunakannya:

p {
    font-weight: bold; /* teks menjadi tebal */
}

h1 {
    font-weight: 900; /* teks menjadi sangat tebal */
}

Nilainya bisa pakai angka dari 100 sampai 900, makin tinggi makin tebal.

Memilih Jenis Huruf dengan Font-family

Pasti kamu pernah lihat ada teks dengan gaya tulisan yang keren seperti di poster atau di majalah online, kan? Di CSS, kamu bisa menentukan gaya tulisan yang ingin kamu gunakan dengan font-family.

Cara Menggunakan Font-family

Kamu bisa memilih jenis huruf seperti Arial, Helvetica, atau Times New Roman. Begini contoh penggunaannya:

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

p {
    font-family: Arial, sans-serif;
}

Kenapa ada dua nama? Itu supaya jika font pertama tidak tersedia, browser akan menampilkan font cadangan yang mirip jenisnya.

Jenis Huruf Gratis dari Google Fonts

Kalau kamu ingin menggunakan jenis huruf yang lebih keren lagi, kamu bisa kunjungi fonts.google.com. Di sana ada banyak sekali jenis font keren yang gratis.

Cara pakainya:

  1. Pilih font favoritmu di Google Fonts.

  2. Salin kode <link> yang disediakan.

  3. Tempelkan di bagian <head> HTML-mu.

Contoh pemakaiannya begini:

<head>
    <link href="link-dari-google-font" rel="stylesheet">
</head>

<style>
h1 {
    font-family: 'Nama Font', sans-serif;
}
</style>

Sekarang teks kamu bisa tampil keren dengan jenis huruf yang dipilih sendiri!

Merapikan Teks dengan Text-align

Nah, selain ukuran dan jenis huruf, CSS juga bisa mengatur posisi tulisan loh, misalnya kiri, tengah, atau kanan.

Kita gunakan text-align seperti ini:

h1 {
    text-align: center; /* teks di tengah */
}

p {
    text-align: right; /* teks rata kanan */
}

Kalau ingin kembali ke posisi biasa, pakai left.

Praktik Langsung Yuk!

Coba sekarang kamu buat sendiri contoh sederhana seperti ini di komputer atau laptopmu:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Latihan CSS Font</title>
    <style>
        html {
            font-size: 18px; /* ukuran dasar */
        }
        h1 {
            font-family: 'Arial', sans-serif;
            font-size: 2rem; /* dua kali ukuran dasar */
            font-weight: 700;
            text-align: center;
            color: coral;
        }
        p {
            font-family: 'Times New Roman', serif;
            font-size: 1rem;
            font-weight: normal;
            text-align: justify;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Belajar Font di CSS</h1>
    <p>
        Hari ini aku belajar cara mengubah ukuran, gaya, dan posisi teks menggunakan CSS. Ternyata gampang banget dan seru!
    </p>
</body>
</html>

Coba simpan dan buka hasilnya di browser, pasti tampil keren!

Mengapa Penting Mengatur Teks?

Mengatur teks dengan baik sangat penting, karena:

  • Membantu pengunjung nyaman membaca.

  • Tampilan website menjadi lebih menarik.

  • Memudahkan pembaca memahami isi website kamu.

Tips Tambahan dalam Memilih Font

  • Jangan terlalu banyak jenis font dalam satu halaman.

  • Pilih font yang mudah dibaca.

  • Gunakan ukuran font yang cukup besar supaya jelas terbaca.

Sekarang kamu sudah bisa mempercantik tampilan teks dengan CSS. Coba terus berlatih dan bereksperimen dengan berbagai jenis font, ukuran, dan warna yang kamu sukai.

Kalau masih bingung, jangan khawatir. Kamu bisa coba-coba atau tanyakan pada guru atau temanmu.

Semoga artikel ini bermanfaat ya, sampai jumpa di pembahasan seru lainnya!

Selamat belajar!

Komentar

Postingan Populer

Gambar

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for professional websites. This theme is perfect for various website types, including personal blogs, online magazines, news websites, and portfolios. Features: Responsive Design: Your website will look its best across all devices, from desktops and laptops to tablets and smartphones. Customizable Colors: Easily change the template's colors to match your branding or preferences. Custom Headers: Upload your own header image to add a personal touch to your website. Custom Menus: Create and manage your website's navigation menus with ease. Widget Areas: Add widgets to display additional content and features on your website's sidebar. Clean HTML & CSS Code: The template is built with clean and well-structured code, making it easy to learn and customize further. Superingan is an ideal choice for those seeking a professional website with a sim...

Halo teman-teman! Pada artikel kali ini, kita akan belajar tentang konsep baru yang penting untuk pemrograman web, yaitu file paths . Kalau sebelumnya kita sudah belajar tentang elemen gambar di HTML, kali ini kita akan memahami cara mengatur lokasi file gambar (atau file lainnya) agar bisa ditampilkan di website. Yuk, langsung mulai! Apa Itu File Path? Bayangkan kamu ingin menunjukkan lokasi spesifik suatu tempat ke temanmu. Misalnya, “Pergi ke Jakarta, masuk ke daerah Menteng, lalu cari Jalan Kebon Sirih.” Nah, komputer juga butuh cara untuk menemukan lokasi file, seperti gambar, dokumen, atau halaman HTML lainnya. Inilah yang disebut file path . File path bisa diartikan sebagai “alamat” file atau folder di komputer kamu. Ada dua jenis file path yang sering digunakan: Absolute Path Alamat lengkap file yang dimulai dari “akar” (root) komputer. Misalnya: Windows: C:\Project\Images\kucing.png Mac: /Users/NamaUser/Project/Images/kucing.png Relative Path Alamat file yang r...

Gambar

Sebagai salah satu ruangan yang paling bekerja keras dan seringkali paling terlihat di rumah, perpaduan antara bentuk dan fungsi adalah kunci di dapur. Dapur yang indah dan fungsional dapat menjadi tempat yang menyenangkan untuk memasak, makan, dan berkumpul bersama keluarga dan teman.  Dalam postingan blog ini, saya akan membahas tujuh tren dapur teratas untuk tahun 2024. Tren-tren ini menggabungkan keindahan dan fungsionalitas untuk menciptakan dapur yang sempurna untuk memenuhi kebutuhan Anda. Batu alam yang tahan lama  Seiring munculnya risiko kesehatan yang terkait dengan batu buatan, pemilik rumah semakin memilih batu alam untuk lantai dan splashback mereka.  Granit khususnya mengalami "kebangkitan besar" berkat kekuatan dan daya tahannya. Granit adalah bahan yang sangat tahan lama dan tahan terhadap noda, goresan, dan suhu tinggi. Ini juga dapat dipersonalisasi dengan berbagai pola dan warna.  Dolomit dan kuarsit juga menjadi populer sebagai alternatif yang le...