Cara Menggunakan HTML Style: Inline hingga Eksternal
Irhan Hisyam Dwi Nugroho
•
10 June 2025
•
260
Warga Bimbingan, kalau tampilan websitemu masih polos, mungkin kamu belum pakai HTML style dengan tepat. Tanpa styling, halaman web jadi kurang menarik.
Tenang, MinDi siap bantu kamu pahami cara pakai HTML style, dari inline sampai eksternal. Yuk kita pelajari bareng biar websitemu makin kece!
Apa Itu HTML Style?
HTML style adalah cara untuk mengatur tampilan elemen-elemen di dalam halaman web menggunakan properti visual seperti warna, ukuran, margin, dan lainnya.
Dengan HTML style, kamu bisa mengubah desain suatu elemen agar lebih menarik dan sesuai dengan kebutuhan.
Style ini bisa diterapkan langsung di dalam tag HTML (inline), di bagian <style> dalam dokumen HTML (internal), atau lewat file CSS terpisah (eksternal).
Penggunaan style sangat penting agar tampilan website tidak hanya informatif, tapi juga estetis dan user-friendly.
Baca juga : Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Cara Menambahkan Style di HTML
Sumber: Canva
Menambahkan style ke HTML sangat penting untuk mengatur tampilan elemen agar lebih menarik dan profesional.
Warga Bimbingan, berikut tiga cara umum yang bisa kamu gunakan untuk menerapkan HTML style dalam proyek web kamu:
1. Inline Style
Inline style diterapkan langsung ke dalam elemen HTML menggunakan atribut style. Cara ini cocok untuk perubahan cepat atau styling khusus pada satu elemen.
Namun, metode ini kurang efisien jika digunakan dalam skala besar karena membuat kode sulit dibaca dan dikelola.
<p style="color: blue; font-size: 18px;">Teks ini berwarna biru.</p> |
2. Internal Style
Internal style ditulis di dalam tag <style> pada bagian <head> dokumen HTML. Ini berguna saat kamu ingin menerapkan style ke beberapa elemen dalam satu halaman tanpa membuat file CSS terpisah. Cocok untuk proyek kecil atau halaman tunggal.
<head> <style> h1 { color: green; text-align: center; } </style> </head> |
3. Eksternal Style
Eksternal style menggunakan file CSS terpisah yang dihubungkan ke dokumen HTML dengan tag <link>.
Ini adalah cara paling efisien dan profesional, terutama untuk proyek besar karena memisahkan konten dan presentasi. Kamu bisa mengelola tampilan semua halaman hanya dari satu file CSS.
<head> <link rel="stylesheet" href="style.css"> </head> |
Baca juga : Cara Membuat Website dengan HTML dan CSS Langkah Mudah
Properti Style Umum di HTML
Sumber: Canva
Setelah tahu cara menambahkan style, penting juga buat kamu, Warga Bimbingan, memahami properti-properti umum yang sering digunakan dalam HTML style.
Properti ini mengatur berbagai aspek tampilan, mulai dari warna, ukuran, posisi, hingga jarak antar elemen.
Berikut adalah beberapa properti style yang paling sering digunakan dalam HTML dan CSS:
Properti | Fungsi | Contoh Penggunaan |
color | Mengatur warna teks | color: red; |
font-size | Mengatur ukuran teks | font-size: 16px; |
background-color | Memberi warna latar belakang | background-color: yellow; |
margin | Mengatur jarak luar antar elemen | margin: 20px; |
padding | Mengatur jarak dalam antara konten dan batas elemen | padding: 10px; |
border | Menambahkan garis batas pada elemen | border: 1px solid black; |
text-align | Mengatur perataan teks (kiri, kanan, tengah) | text-align: center; |
width | Mengatur lebar elemen | width: 300px; |
height | Mengatur tinggi elemen | height: 200px; |
display | Mengatur jenis tampilan elemen (inline, block, dsb.) | display: block; |
Baca juga : 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat
Contoh Penggunaan HTML Style
Warga Bimbingan, setelah memahami properti-properti dasar dalam HTML style, sekarang saatnya melihat penerapannya secara langsung.
Berikut lima contoh penggunaan HTML style yang sering digunakan dalam pembuatan halaman web:
1. Mengatur Warna Teks
Kamu bisa membuat teks lebih menarik dengan memberi warna menggunakan properti color.
Ini membantu elemen teks lebih menonjol atau sesuai tema website. Cocok digunakan pada heading, paragraf, atau link.
<p style="color: blue;">Teks ini akan tampil dalam warna biru.</p> |
2. Mengatur Ukuran dan Jenis Font
Properti font-size dan font-family digunakan untuk menyesuaikan ukuran dan gaya huruf. Ini penting untuk meningkatkan keterbacaan dan estetika. Pilih font yang sesuai agar tampilan lebih profesional.
<p style="font-size: 18px; font-family: Arial, sans-serif;">Ini teks dengan ukuran 18px dan font Arial.</p> |
3. Memberi Latar Belakang
Menggunakan background-color, kamu bisa menambahkan warna latar belakang pada elemen tertentu.
Biasanya dipakai untuk menonjolkan bagian seperti banner, tombol, atau informasi penting. Gunakan warna yang kontras agar isi mudah terbaca.
<div style="background-color: lightgrey; padding: 10px;"> Ini kotak dengan latar belakang abu-abu muda. </div> |
4. Menambahkan Padding dan Margin
Padding memberikan ruang di dalam elemen, sementara margin memberi ruang antar elemen.
Ini sangat penting agar elemen tidak saling menempel dan tampil rapi. Keduanya membantu layout lebih tertata.
<div style="padding: 20px; margin: 10px; background-color: beige;"> Elemen ini punya padding dan margin untuk memberi jarak yang pas. </div> |
5. Menata Perataan Teks
Menggunakan text-align, kamu bisa mengatur apakah teks diratakan kiri, tengah, atau kanan.
Berguna untuk bagian judul, kutipan, atau layout tertentu. Penataan ini memberi kesan rapi dan profesional.
<h2 style="text-align: center;">Judul di Tengah</h2> |
Baca juga : Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula
Perbedaan HTML Style dan CSS
Sumber: Canva
Warga Bimbingan, meskipun HTML style dan CSS keduanya digunakan untuk mengatur tampilan elemen-elemen dalam halaman web, keduanya memiliki perbedaan yang mendasar dalam penggunaannya.
Untuk lebih memahaminya, berikut adalah beberapa perbedaan utama antara HTML style dan CSS:
1. Penerapan dan Penulisan Kode
HTML style diterapkan langsung dalam elemen HTML menggunakan atribut style, sementara CSS biasanya ditulis dalam file terpisah atau dalam tag <style> di bagian <head> HTML.
HTML style cocok untuk perubahan cepat pada satu elemen, sementara CSS lebih terstruktur untuk styling seluruh halaman atau proyek. CSS juga lebih fleksibel dalam pengelolaan style untuk banyak elemen sekaligus.
<!-- HTML Style --> <p style="color: red;">Teks ini berwarna merah.</p> <!-- CSS --> <style> p { color: red; } </style> |
2. Skalabilitas dan Pemeliharaan
CSS lebih unggul dalam hal skalabilitas dan pemeliharaan, karena dapat diterapkan pada banyak elemen sekaligus.
Dengan CSS, kamu dapat mengatur gaya seluruh website dari satu file eksternal, yang lebih mudah untuk diperbarui dan dikelola. Sementara HTML style lebih cocok untuk penggunaan sementara atau per halaman.
<!-- Menggunakan CSS untuk beberapa elemen --> <style> h1, p, div { color: blue; } </style> |
3. Penggunaan yang Tepat
HTML style lebih cocok untuk penyesuaian elemen tertentu dalam halaman yang tidak perlu diubah secara global.
Sementara itu, CSS digunakan untuk memberikan desain yang konsisten di seluruh halaman atau situs web.
Menggunakan CSS akan membuat tampilan lebih konsisten dan terorganisir, terutama untuk proyek besar.
<!-- HTML Style - untuk elemen tertentu --> <p style="color: green;">Teks ini berwarna hijau.</p> <!-- CSS - untuk seluruh halaman --> <style> body { background-color: lightblue; } </style> |
Baca juga : Cara Membuat HTML di Notepad: Langkah Mudah untuk Pemula
Ingin Jadi Web Developer Profesional?
Setelah memahami cara menggunakan HTML style dari inline hingga eksternal, kini saatnya kamu meningkatkan kemampuan coding web dengan bergabung di Bootcamp Web Development di dibimbing.id!
Di sini, kamu akan mempelajari cara menata desain web secara efektif menggunakan HTML, CSS, dan banyak lagi, termasuk pengaturan warna, tata letak, dan estetika visual.
Belajar langsung dari mentor berpengalaman dengan kurikulum praktis yang membantumu menguasai pembuatan website profesional.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu semakin terbuka lebar di dunia web development.
Jadi, tunggu apa lagi? Daftar sekarang di sini dan mulai perjalananmu menjadi Web Developer profesional! #BimbingSampeJadi
Referensi
- HTML <strong> Tag [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
