Contoh penggunaan kode warna pada menggunakan HTML dan CSS

text berwarna dengan HTML CSS
text berwarna dengan HTML CSS - desain gambar ileh : Anissa
Ada beberapa cara yang dapat kita gunakan untuk mewarnai text text tertentu di dalam template blog. Jika kalian berada di halaman ini cobalah klik navigasi menu editblog ini yakni menu "konten" setelah menu dropdown muncul maka diantaranya muncul sebuah menu dengan penulisan kata berbeda warna. Kita dapat menerapkan cara berikut:

Menggunakan CSS:
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body>
<p>HEX colors:</p>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Yellow</p>
<p id="p5">Cerise</p>
</body>
Maka akan di deskripsikan secara visual sebagai contoh berikut: :
HEX colors:
Red
Green
Blue
Yellow
Cerise


Menggunakan HTML
Sedangkan jika menggunakannya langsung ke dalam inti HTML kodenya adalah sebagai berikut:
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
Maka akan di deskripsikan secara visual sebagai contoh berikut:
aku normal
aku merah
aku biru
Aku gede

Demikian cara sederhana merobah warna pada HTML. Gunanya? Ya misalnya kalian ingin membuat tulisan berwarna pada menu diatas header blog seperti template yang sedang di gunakan oleh editblogtema ini. Coba klik menu dropdown "konten" di atas halaman ini. Perhatikan menu: "Trik Menu Navigasi" terdiri dari tiga warna bukan?

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Mampir-mampir mas ke www.otakushinime.xyz

    BalasHapus
  2. Baru tahu kalau ada kode kode htmlnya ya mas, maklum aku awam soal beginian, aku tahunya kalau mewarnai font lamgsung saja dari pilihan warna yang ada di dashboard

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak