HTML (Hypertext Markup Language) merupakan bahasa markup yang digunakan untuk membuat dan memformat halaman web.
Salah satu komponen penting dari HTML adalah style atau gaya. Style dalam HTML dapat dikustomisasi dengan menggunakan CSS (Cascading Style Sheets) untuk memberikan tampilan yang lebih menarik dan sesuai dengan tema halaman web.
Dalam artikel ini, akan dibahas secara detail mengenai style dalam HTML beserta contohnya.
Inline Style
Inline style adalah salah satu cara untuk menambahkan style langsung pada elemen HTML. Inline style didefinisikan dengan menambahkan atribut style pada elemen HTML. Contohnya:
Dalam contoh di atas, warna teks pada paragraf diubah menjadi merah dengan menggunakan inline style.
Kelebihan dari inline style adalah mudah digunakan dan diterapkan, namun kekurangannya adalah sulit untuk memperbarui atau mengubah style secara umum pada seluruh halaman web.
Internal Style
Internal style adalah cara lain untuk menambahkan style pada halaman web dengan menempatkan style di dalam tag <style> di bagian head pada dokumen HTML. Contohnya:
Dalam contoh di atas, style untuk elemen p didefinisikan di dalam tag style di bagian head.
Kelebihan dari internal style adalah memungkinkan untuk mengubah style secara umum pada seluruh halaman web, namun kekurangannya adalah jika halaman web memiliki banyak style, maka tag style di bagian head akan menjadi sangat panjang.
External Style
External style adalah cara lain untuk menambahkan style pada halaman web dengan menempatkan style di dalam file eksternal yang terpisah dari dokumen HTML. File eksternal tersebut memiliki ekstensi .css dan dapat dihubungkan dengan dokumen HTML menggunakan tag <link> pada bagian head. Contohnya:
Isi File Style.css:
File Halaman index.html:
Dalam contoh di atas, style untuk elemen p didefinisikan di dalam file eksternal style.css yang dihubungkan dengan dokumen HTML menggunakan tag link di bagian head.
Kelebihan dari external style adalah memungkinkan untuk mengubah style secara umum pada seluruh halaman web dan memudahkan pemeliharaan style pada file yang terpisah, namun kekurangannya adalah membutuhkan waktu lebih untuk membuat dan menghubungkan file eksternal.
Selektor
Selektor dalam CSS digunakan untuk memilih elemen pada halaman web yang akan diubah style-nya.
Terdapat beberapa jenis selektor dalam CSS seperti selektor elemen, selektor Class, selektor ID, dan selektor atribut.
Selektor Elemen
Selektor elemen digunakan untuk memilih semua elemen yang memiliki tag HTML yang sama. Contohnya:
Dalam contoh di atas, selector elemen "p" digunakan untuk memilih semua elemen paragraf dan memberikan style pada teksnya.
Selektor Kelas
Selektor Class digunakan untuk memilih elemen yang memiliki atribut "class" yang sama. Contohnya:
Dalam contoh di atas, selector kelas ".blue" digunakan untuk memilih semua elemen yang memiliki atribut "class" dengan nilai "blue" dan memberikan style pada teksnya.
Selektor ID
Selektor ID digunakan untuk memilih elemen yang memiliki atribut "id" yang sama. Contohnya:
Dalam contoh di atas, selector ID "#header" digunakan untuk memilih elemen yang memiliki atribut "id" dengan nilai "header" dan memberikan style pada background-color.
Selektor Atribut
Selektor atribut digunakan untuk memilih elemen yang memiliki atribut tertentu. Contohnya:
Dalam contoh di atas, selector atribut "a[href="https://www.google.com"]" digunakan untuk memilih elemen anchor yang memiliki atribut "href" dengan nilai "https://www.google.com" dan memberikan style pada teksnya.
Properti Style
Ada banyak properti style yang dapat digunakan dalam HTML dan CSS untuk memberikan tampilan yang lebih menarik pada halaman web. Beberapa properti style yang sering digunakan antara lain:
- Background-color: digunakan untuk memberikan warna latar belakang pada elemen HTML.
- Color: digunakan untuk memberikan warna teks pada elemen HTML.
- Font-size: digunakan untuk mengatur ukuran font pada teks.
- Font-family: digunakan untuk mengatur jenis font pada teks.
- Border: digunakan untuk mengatur tampilan border pada elemen HTML.
- Padding: digunakan untuk mengatur jarak antara isi elemen dengan border-nya.
- Margin: digunakan untuk mengatur jarak antara elemen dengan elemen lainnya.
Contoh penggunaan properti style dalam CSS:
Dalam contoh di atas, properti style digunakan untuk memberikan tampilan pada elemen paragraf seperti warna latar belakang, warna teks, ukuran font, jenis font, tampilan border, jarak antara isi dengan border, dan jarak antara elemen dengan elemen lainnya.
Kesimpulan
Style dalam HTML sangat penting untuk memberikan tampilan yang menarik pada halaman web. Ada beberapa cara untuk menambahkan style pada HTML seperti inline style, internal style, dan external style.
Selektor dan properti style dalam CSS digunakan untuk memilih elemen dan memberikan tampilan yang diinginkan pada halaman web.
Dalam memilih style, pastikan untuk memilih style yang sesuai dengan tema halaman dan konsisten dengan seluruh halaman web.
Selain itu, pastikan juga untuk menghindari penggunaan style yang berlebihan atau berlebihan dalam menggunakannya, karena dapat mengurangi kecepatan loading halaman web.
Untuk mempelajari lebih lanjut tentang HTML dan CSS, ada banyak sumber belajar online yang tersedia, seperti tutorial online, video tutorial, buku, dan lain sebagainya.
Dengan mempelajari HTML dan CSS dengan baik, Anda dapat membuat halaman web yang menarik dan profesional dengan mudah. Selamat belajar!
0 comments