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.

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:

Selanjutnya, berikut cara mengatur style tampilan di HTML:

#1 Menggunakan tag <style>

Seperti yang telah kita bahas sebelumnya, tag < style > ditempatkan di dalam elemen

style

web

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.

Ini adalah teks berwarna biru.

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:


Ini adalah div dengan background berwarna #FF5733.