Style HTML
Pengantar
HTML style memiliki berbagai properti dan teknik tertentu. Kita dapat melihat betapa pentingnya memahami dan menerapkan style dengan benar untuk menciptakan tampilan yang menarik dan fungsional. Saat ini, tampilan sebuah halaman web bukan hanya sekedar estetika, tetapi juga cerminan identitas dan profesionalitas.
HTML style hadir menjadi jembatan yang menghubungkan antara struktur dasar halaman dengan presentasi visual yang menarik. Alat ini memastikan setiap elemen di halaman web tidak hanya berfungsi dengan baik, tetapi juga tampak memikat. Dengan memahami kekuatan dan fleksibilitas yang ditawarkan oleh HTML style, setiap web developer berkesempatan mengubah halaman biasa menjadi karya seni digital yang memikat. Yuk, simak!
Penjelasan HTML Style Tag
Tag < style > dalam HTML adalah alat yang berfungsi untuk menambahkan sentuhan estetika pada elemen-elemen di halaman web. Dengan kata lain, tag ini dipakai untuk memberikan style atau tampilan pada elemen HTML. Salah satu kelebihan utama dari tag < style > adalah kemampuannya memisahkan konten dengan presentasi. Dengan begitu, kamu bisa fokus pada penulisan konten tanpa harus terganggu dengan bagaimana tampilannya nanti. Sebaliknya, saat kamu ingin mengubah tampilan, kamu tidak perlu menyentuh konten aslinya. Proses ini mirip dengan saat kamu mengganti cover buku tanpa mengubah isinya. Dengan pemisahan ini, pekerjaan menjadi lebih terstruktur dan efisien. Pemisahan ini juga memudahkan kerja sama dalam tim. Seorang content writer bisa fokus menulis tanpa harus pusing memikirkan tampilan. Di sisi lain, seorang designer dapat mengatur tampilan tanpa harus menyentuh isi konten.
Sintaksis Dasar Penggunaan Tag < style >
Tag < style > menjadi elemen kunci dalam mendefinisikan style pada halaman web. Untuk memahami bagaimana cara kerjanya, kita perlu memahami sintaksis dasarnya. Berikut penjelasan mengenai sintaksis dasar penggunaan tag < style >.
Penempatan tag
Tag < style > biasanya ditempatkan di dalam elemen < head > pada dokumen HTML. Meskipun demikian, kamu juga bisa menempatkannya di dalam elemen < body >, walaupun penempatan di < head> lebih umum dan disarankan.
<head>
<style>
/* kode CSS di sini */
</style>
</head>
Selector
Di dalam tag < style >, kamu harus menentukan elemen HTML mana yang ingin kamu ubah. Elemen ini disebut dengan "selector". Misalnya, jika kamu ingin mengatur gaya untuk semua elemen paragraf (< p >), berarti "p" adalah selektornya.
Declaration
Setelah menentukan selector, kamu perlu mendefinisikan style yang diinginkan. Style ini didefinisikan dalam bentuk pasangan property dan value yang dikenal sebagai declaration.
p {
color: red;
font-size: 16px;
}
Pada contoh di atas, "color" dan "font-size" adalah property, sedangkan "red" dan "16px" adalah value-nya.
Kurung kurawal { }
Style declaration dikelilingi oleh kurung kurawal. Selector diikuti oleh kurung kurawal dan di dalam kurung kurawal inilah kamu menulis style declaration-mu.
Titik koma (;)
Setiap declaration diakhiri dengan titik koma. Hal ini memungkinkan kamu menambahkan declaration lain setelahnya.
Cara Mengatur Style Tampilan di HTML
Mengatur tampilan di HTML tidak hanya tentang mengetahui bagaimana menggunakan tag <style>, tetapi juga memahami properti CSS yang dapat digunakan untuk mengubah berbagai aspek tampilan elemen HTML.
Berikut beberapa properti CSS yang umum digunakan:
Properti CSS
Selanjutnya, berikut cara mengatur style tampilan di HTML:
#1 Menggunakan tag <style>
Seperti yang telah kita bahas sebelumnya, tag < style > ditempatkan di dalam elemen <head> dan digunakan untuk mendefinisikan style dari elemen-elemen di halaman web-mu.
<head>
<style>
p {
color: green;
}
</style>
</head>
Dalam contoh di atas, semua elemen paragraf (< p >) akan memiliki warna teks hijau.
#2 Menggunakan atribut style
Kamu juga bisa mengatur style langsung pada elemen HTML tertentu dengan menggunakan atribut style. Cara ini berguna jika kamu hanya ingin mengubah tampilan dari satu elemen tertentu.
<p style="color: blue;">Ini adalah teks berwarna biru.</p>
Contoh HTML Style untuk Warna Background
Mengubah warna background,memberikan nuansa dan suasana tertentu pada halaman web. Di CSS, properti yang digunakan untuk mengatur warna background adalah background-color.
Properti background-color memungkinkan kamu menentukan warna latar belakang untuk elemen tertentu. Warna bisa ditentukan dengan berbagai cara, seperti nama warna (seperti "red" atau "blue"), kode RGB, kode RGBA (dengan transparansi), kode HEX, dan lainnya.
Contoh Penggunaan menggunakan Kode HEX:
<div style="background-color: #FF5733;">
Ini adalah div dengan background berwarna #FF5733.</div>
Dalam contoh di atas, kode #FF5733 mewakili warna yang memiliki komponen merah dengan nilai FF, hijau dengan nilai 57, dan biru dengan nilai 33. Hasilnya adalah warna oranye cerah.
Contoh HTML Style untuk Font
Dalam mendesain halaman web, font yang kamu gunakan dapat memengaruhi keterbacaan konten dan memberikan kesan tertentu kepada pengunjung. Di CSS, properti yang digunakan untuk mengatur jenis font adalah font-family.
Properti font-family membantu dalam menentukan satu jenis huruf atau lebih yang akan digunakan sebagai alternatif jika jenis huruf pertama tidak tersedia di device audiens.
Contoh penggunaan beberapa jenis huruf sebagai alternatif:
<p style="font-family: Arial, sans-serif;">
Ini adalah teks dengan font Arial atau font sans-serif lainnya jika Arial tidak tersedia.</p>
Di sini, jika font Arial tidak tersedia di deview pengunjung, browser akan mencoba menggunakan jenis huruf sans-serif lainnya yang tersedia.
Contoh HTML Style untuk Warna Teks
Warna yang tepat dapat meningkatkan keterbacaan, menarik perhatian, dan memberikan suasana atau mood tertentu pada konten. Di CSS, properti yang digunakan untuk mengatur warna teks adalah color.
Seperti halnya dengan properti CSS lainnya yang berkaitan dengan warna, kamu bisa menentukan warna dengan berbagai cara, seperti nama warna, kode RGB, kode HEX, dan lainnya. Contoh penggunaan menggunakan kode HEX:
<p style="color: #333333;">
Ini adalah teks dengan warna #333333.</p>
Pada contoh di atas, kode #333333 mewakili warna abu-abu gelap. Dengan kode HEX, kamu memiliki kebebasan untuk menentukan warna dengan presisi tinggi.
Contoh HTML Style untuk Ukuran Teks
Ukuran teks adalah salah satu faktor kunci dalam keterbacaan sebuah halaman web. Terlalu kecil bisa membuat teks sulit dibaca, sementara terlalu besar bisa membuat tampilan halaman terasa berantakan. Dalam CSS, properti yang digunakan untuk mengatur ukuran teks adalah font-size. Properti font-size membantu kamu menentukan ukuran teks untuk elemen tertentu di halaman web. Kamu bisa menentukan ukuran dalam berbagai satuan, seperti piksel (px), em, persen (%), dan lainnya.
Contoh penggunaan dengan satua piksel (px):
<p style="font-size: 16px;">Ini adalah teks dengan ukuran 16px.</p>
Dalam contoh di atas, teks di dalam elemen paragraf (< p >) akan ditampilkan dengan ukuran 16 piksel.
Contoh HTML Style untuk Meratakan Teks
Apakah teks di halaman web ingin kamu atur sebagai rata kiri, rata kanan, rata tengah, atau rata penuh? Di CSS, properti yang digunakan untuk mengatur penjajaran teks ini adalah text-align. Ada beberapa nilai yang bisa kamu gunakan dengan properti ini, seperti left, right, center, dan justify.
Contoh penggunaan rata tengah:
<p style="text-align: center;">Ini adalah teks yang diratakan ke tengah.</p>
Dalam contoh di atas, teks di dalam elemen paragraf (< p >) akan diratakan ke tengah.
HTML style memiliki berbagai properti dan teknik tertentu. Kita dapat melihat betapa pentingnya memahami dan menerapkan style dengan benar untuk menciptakan tampilan yang menarik dan fungsional. Dari penentuan warna, pemilihan font, penyesuaian ukuran teks, sampaikan meratakan konten, setiap detail memiliki peranannya dalam menyempurnakan tampilan sebuah halaman web.