Cara Membuat Warna yang Berbeda Dalam Satu Baris Judul
Di Hari ini saya akan berbagi pengalaman dengan teman-teman di mana ini sering sekali di pertanyakan oleh teman-teman belajar saya, ketika kesulitan merancang judul tapi kata berikutnya warnanya berbeda, apa lagi kebanyakan judul tag yang sering di gunakan ialah tag h1, tag h1 itu termasuk pada tag yang bersifat BLE, apa itu BLE nanti saya jelaskan di paragraf berikutnya, karenanya dari itu jangan kemana-mana sesaat lagi kita akan belajar cara merancang warna yang berbeda pada satu baris judul, simak terus ya teman-teman.
Sebelum kita belajar dan membahas cara merancang warna yang berbeda pada satu baris judul, seperti janji saya di atas jadi ketika kita merancang judul dengan menggunakan tag h1 yang bersifat BLE atau di sebut block level element, dimana ketika kita menulis tag h1 di pada text editor walaupun kita menulisnya pada satu baris, karenanya hasil dari web browser akan berubah dengan baris sendiri-sendiri. Lebih enak saya jelaskan dengan contohnya:
<span style=color: rgb(255, 0, 0); data-mce-style=color: #ff0000;><h1>ini judul berwarna biru tetapi teks ini --> Kuning <-- dapat kah</h1></span> <span style=color: rgb(0, 0, 255); data-mce-style=color: #0000ff;><h1>ini judul berwarna biru tetapi teks ini --> Kuning <-- dapat kah</h1></span>
disini saya menulisnya pada satu baris bagaimana hasilnya:
dapat dilihat ya, yang akan tampil, tag h1 yang satunya merancang baris baru, ini yang dinamakan block level element. lalu bagaimana ketika kita ingin menstyle warna yang berbeda di judul tersebut, apabila kita merancang tag h1 lagi, pasti hasilnya akan ke bawah benar bukan. ya benar !. oke bagaimana cara merancang warna yang berbeda pada satu baris judul, coba teman-teman perhatikan judul yang saya bikin di atas ada kata yang bertuliskan “kuning”, di situ nanti saya akan merancang beda warnannya, perhatikan struktur html berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Cara Merancang Warna yang Berbeda Pada Satu Baris Judul</title>
<-e-style type=text/css>
body{
background-color: #666;
}
.container{
width: 800px;
margin: auto;
}
h1{
color: blue;
}
span{
color: yellow;
}
<-e/style>
</head>
<body>
<div class=container>
<h1>ini judul berwarna biru tetapi teks ini --> <span style=color: #ff0000><span><span style=color: #ffff00>Kuning</span></span></span> <-- dapat kah</h1>
</div>
</body>
</html>
Sekarang ini teman-teman dapat menstyle warna sesuka teman-teman dengan tag span kita dapat merancang kata itu jadi berbeda, atau dapat kita style tulisannya dengan CSS tanpa turun ke bawah, oiya tag span termasuk ILE ya, inline level element, oke saya rasa lumayan hingga disini dulu belajar kita mengenai cara merancang warna yang berbeda pada satu baris judul, hingga jumpa di artikel berikutnya terimkasih.
Sumber https://kursuswebsite.org
