Halo teman-teman,
Setelah sebelumnya kita belajar cara menulis paragraf dengan baik di HTML, sekarang kita lanjut ke bagian yang bikin tampilan halaman web jadi lebih hidup: style.
Secara bawaan, halaman HTML tampilannya cenderung polos. Tapi dengan bantuan style, kita bisa kasih warna, mengatur ukuran teks, mengganti font, sampai memposisikan elemen di halaman. Nah, semua itu bisa kita lakukan dengan atribut style.
Apa Itu Atribut style?
Atribut style adalah cara untuk menambahkan gaya langsung ke sebuah elemen HTML. Di dalamnya, kita menulis properti dan nilai CSS.
Contohnya:
<p style="color: red;">Ini teks berwarna merah.</p>
Mengatur Warna Latar dan Teks
Untuk mengubah warna latar belakang, kita gunakan properti background-color.
<body style="background-color: powderblue;">
Untuk mengubah warna teks, kita gunakan properti color.
<h1 style="color: blue;">Judul Berwarna Biru</h1>
<p style="color: red;">Ini paragraf berwarna merah.</p>
Mengatur Font dan Ukuran
Kamu juga bisa mengubah jenis huruf menggunakan font-family:
<p style="font-family: Verdana;">Teks dengan font Verdana</p>
<p style="font-family: Courier;">Teks dengan font Courier</p>
Untuk mengatur ukuran teks, kita gunakan font-size:
<h1 style="font-size: 40px;">Judul Besar</h1>
<p style="font-size: 20px;">Paragraf dengan ukuran sedang</p>
Mengatur Posisi Teks (Text Alignment)
Kalau kamu ingin teks berada di tengah atau di kanan, bisa gunakan properti text-align.
<h1 style="text-align: center;">Judul di Tengah</h1>
<p style="text-align: right;">Paragraf di Kanan</p>
Atribut style sangat fleksibel dan berguna untuk styling cepat, tapi kalau proyekmu makin besar, disarankan untuk pakai file CSS terpisah biar kode HTML tetap bersih dan terstruktur.
Tapi untuk sekarang, nggak apa-apa kita belajar dari style dulu ya, supaya kamu makin paham logika styling dasar HTML.
Kalau ada yang masih bingung soal penggunaan style di elemen HTML, langsung aja tulis di kolom komentar ya. Kita bahas bareng!
Di materi selanjutnya, kita akan belajar tentang formatting di HTML—cara membuat teks menjadi tebal, miring, bergaris, dan masih banyak lagi. Sampai ketemu di tutorial berikutnya!
Komentar
Posting Komentar