Memahami HTML Styles: Cara Mudah Mengubah Tampilan Elemen Website
Pada panduan sebelumnya, Anda telah sukses mempelajari bagaimana cara menyusun teks artikel menggunakan HTML Paragraphs. Namun, jika Anda perhatikan jalannya latihan kita sejauh ini, halaman website yang kita buat masih terlihat sangat polos—teks berwarna hitam dengan latar belakang putih bersih bawaan browser.
Langkah penting selanjutnya untuk membuat website Anda terlihat menarik, estetis, dan profesional adalah memahami HTML Styles.
Di dalam artikel ini, kita akan membahas secara tuntas bagaimana cara memberikan sentuhan warna, mengganti jenis huruf, mengatur ukuran teks, hingga menentukan perataan objek pada elemen HTML menggunakan sebuah atribut khusus bernama style. Yuk, kita bedah bersama!
Apa itu HTML Styles?
HTML Styles adalah sebuah metode yang digunakan untuk mengubah tampilan visual atau desain dari sebuah elemen HTML. Untuk melakukan hal ini, HTML menyediakan sebuah atribut global yang bisa dipasang di tag mana saja, yaitu atribut style.
Pemberian gaya langsung di dalam tag pembuka HTML ini dikenal juga dengan istilah Inline CSS (Cascading Style Sheets).
Sintaks dan Rumus Dasar Penulisan Atribut Style
Penulisan atribut style harus diletakkan di dalam tag pembuka suatu elemen sebelum tag tersebut ditutup dengan tanda >. Rumus dasarnya adalah sebagai berikut:
Properti (Property): Jenis gaya visual yang ingin Anda ubah (misalnya: warna teks, ukuran huruf, warna latar belakang).
Nilai (Value): Ketentuan atau ukuran dari gaya yang Anda inginkan (misalnya: warna merah, ukuran 20 pixel, posisi di tengah).
Aturan Emas: Antara properti dan nilai wajib dipisahkan oleh tanda titik dua (
:), dan setiap satu paket gaya harus diakhiri dengan tanda titik koma (;).
Contoh Properti HTML Styles yang Paling Sering Digunakan
Berikut adalah beberapa properti dasar atribut style yang paling penting dan wajib Anda ketahui untuk menghias halaman website:
1. Mengubah Warna Teks (color)
Untuk mengubah warna teks di dalam paragraf atau judul, gunakan properti color diikuti dengan nama warna standar dalam bahasa Inggris.
<p style="color: red;">Teks ini akan berwarna merah.</p><p style="color: blue;">Teks ini akan berwarna biru.</p>2. Mengubah Warna Latar Belakang (background-color)
Anda bisa mengubah warna latar belakang pada satu elemen spesifik seperti paragraf, atau bahkan mengubah warna seluruh halaman website jika properti ini dipasang pada tag <body>.
<body style="background-color: lightgray;"> <h1 style="background-color: yellow;">Judul dengan Latar Belakang Kuning</h1></body>3. Mengubah Jenis Huruf (font-family)
Secara bawaan, browser biasanya menampilkan teks dengan font Times New Roman. Anda bisa mengubah jenis tulisan tersebut agar lebih modern menggunakan properti font-family.
<p style="font-family: Arial;">Teks ini menggunakan jenis huruf Arial.</p><p style="font-family: 'Courier New';">Teks ini menggunakan jenis huruf Courier New.</p>4. Mengubah Ukuran Huruf (font-size)
Jika ukuran bawaan dari tag <p> atau <h2> dirasa kurang pas dengan desain Anda, gunakan properti font-size dengan satuan pixel (px) atau persen (%).
<p style="font-size: 22px;">Teks ini berukuran besar yaitu 22 pixel.</p>
5. Mengatur Perataan Teks (text-align)
Properti ini berfungsi seperti fitur alignment di Microsoft Word, yaitu untuk mengatur posisi perataan teks (rata kiri, rata tengah, atau rata kanan).
<h2 style="text-align: center;">Judul Ini Berada di Tengah Halaman</h2>
Tabel Ringkasan Properti HTML Styles
Agar proses belajar dan latihan coding Anda menjadi lebih mudah, berikut adalah tabel rangkuman properti dasar atribut style:
| Properti CSS | Fungsi Utama | Contoh Penerapan Kode |
| background-color | Mengubah warna latar belakang elemen. | style="background-color: black;" |
| color | Mengubah warna teks di dalam elemen. | style="color: green;" |
| font-family | Mengubah jenis atau tipe font tulisan. | style="font-family: Helvetica;" |
| font-size | Mengatur ukuran besar atau kecilnya huruf. | style="font-size: 16px;" |
| text-align | Mengatur perataan teks (kiri, tengah, kanan, rata kiri-kanan). | style="text-align: right;" |
Menggabungkan Beberapa Gaya Sekaligus
Kelebihan utama dari atribut style adalah Anda bisa memasukkan banyak properti sekaligus di dalam satu tag yang sama. Anda hanya perlu memisahkan setiap properti menggunakan tanda titik koma (;).
Perhatikan contoh kombinasi kode berikut ini:
<p style="color: white; background-color: red; font-size: 20px; text-align: center;"> Teks ini berwarna putih, berlatar belakang merah, berukuran 20px, dan posisinya tepat di tengah!</p>Kesimpulan
Atribut style pada HTML adalah gerbang awal yang sangat menyenangkan bagi pemula untuk mulai berkreasi menghias tampilan halaman website. Namun, perlu dicatat bahwa menuliskan atribut style terlalu banyak langsung di dalam tag HTML (Inline CSS) bisa membuat kode Anda terlihat panjang dan berantakan jika skala websitenya sudah besar.
Oleh karena itu, setelah kita memahami dasar pewarnaan halaman ini, langkah selanjutnya adalah mempelajari variasi dekorasi teks yang lebih spesifik. Di artikel berikutnya, kita akan membahas mengenai HTML Formatting. Tetap semangat belajarnya!
Apakah Anda sudah mencoba mengubah warna latar belakang dokumen HTML Anda hari ini? Jika ada kode warna yang tidak muncul atau ada bagian yang ingin Anda tanyakan, yuk tuliskan di kolom komentar di bawah!
Tidak ada komentar:
Posting Komentar