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 <style>

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.

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.

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 &lt;style>, tetapi juga memahami properti CSS yang dapat digunakan untuk mengubah berbagai aspek tampilan elemen HTML. 

Berikut beberapa properti CSS yang umum digunakan:

Selanjutnya, berikut cara mengatur style tampilan di HTML:

#1 Menggunakan tag &lt;style>

Seperti yang telah kita bahas sebelumnya, tag < style > ditempatkan di dalam elemen &lt;head> dan digunakan untuk mendefinisikan style dari elemen-elemen di halaman web-mu.

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.

{{COMPONENT_IDENTIFIER}}

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:

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:

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:

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):

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:

Dalam contoh di atas, teks di dalam elemen paragraf (< p >) akan diratakan ke tengah.

FAQ (Frequently Ask Question)

Apa perbedaan antara inline style, internal style, dan external style?

Inline style adalah style yang diterapkan langsung pada elemen HTML individu menggunakan atribut style. Internal style adalah style yang didefinisikan di dalam tag style pada dokumen HTML, biasanya di bagian < head >.

Sementara itu, external style adalah style yang didefinisikan dalam file CSS terpisah. File ini kemudian dihubungkan ke dokumen HTML menggunakan tag <link>.

Namun, penting untuk diingat penggunaan inline style dan internal style bukanlah best practice dalam pengembangan web. Metode terbaik untuk memberi styling pada HTML adalah menggunakan file CSS terpisah atau external style.

Alasannya, browser akan merender kerangka HTML lebih cepat jika styling didefinisikan dalam file CSS terpisah. Proses ini tidak hanya mempercepat waktu pemuatan halaman, tetapi juga memudahkan pemeliharaan dan kolaborasi dalam tim development.

Mengapa penting untuk memisahkan CSS dari HTML?

Memisahkan CSS dari HTML memudahkan pemeliharaan, meningkatkan keterbacaan kode, dan memungkinkan style yang konsisten di seluruh website dengan menggunakan satu file CSS.

Proses ini juga mempercepat waktu pemuatan halaman karena browser dapat menyimpan file CSS terpisah sebagai cache.

Penutup

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.