Cara Menggunakan Style di HTML 5

Cara Menggunakan Style di HTML 5

lebakcyber.net -Pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara menggunakan style di HTML 5. Style pada HTML 5 sendiri digunakan untuk mengganti atau menambahkan element pada HTML.

Setiap element pada HTML memiliki style defaultnya masing-masing, seperti misalnya warna background, warna text dan lain sebagainya.

Atribut style sendiri hanya bisa digunakan pada tag HTML. Untuk menggunakan style di HTML kalian harus memiliki sedikit pengetahuan mengenai properties di css seperti misalnya color, background-color, text-align dan sebagainya.

Contoh syntax dari penggunaan Style di HTML 5 adalah seperti berikut :

style="property:value"

Contoh Style HTML Color

Pada contoh ini kita akan mencoba merubah warna teks dengan mengguna style color di HTML 5, contohnya seperti berikut ini :

<h4 style="color: green;">Ini teks dengan warna hijau</h4>
<h4 style="color: red;">Ini teks dengan warna merah</h4>

Hasilnya adalah seperti pada contoh dibawah ini :

Ini teks dengan warna hijau

Ini teks dengan warna merah

Contoh Style Background-Color

Style background-color biasanya digunakan untuk merubah warna background pada HTML 5. Silahkan perhatikan contoh tag HTML dengan menggunakan property css background-color dibawah ini :

<h4 style="background-color:yellow;">Ini adalah background kuning</h4>
<h4 style="background-color:red;color:white">Ini adalah background merah</h4>

Nanti hasilnya akan seperti dibawah ini :

Ini adalah background kuning

Ini adalah background merah

Contoh Style font-family

Penggunaan style font-family biasanya digunakan untuk mengganti font pada teks yang ada di tag HTML. Contoh penggunaannya adalah seperti dibawah ini :

<p style="font-family:times new roman">contoh teks dengan font times new roman</p>
<p style="font-family:arial">Contoh teks dengan font arial</p>

Nanti hasilnya akan seperti contoh dibawah ini :

contoh teks dengan font times new roman

Contoh teks dengan font arial

Contoh Style Text-Align

Style text-align biasanya digunakan untuk mengatur teks agar menjadi rata kanan, rata kiri atau rata tengah. Contohnya penggunaan style Text-Align adalah seperti berikut ini :

<p style="text-align:right;background-color:blue;">Teks ini berada di sebelah kanan</p>
<p style="text-align:center;background-color:blue;">Teks ini berada di tengah</p>
<p style="text-align:left;background-color:blue;">Teks ini berada di sebelah kiri</p>

Nanti hasilnya akan seperti dibawah ini :

Teks ini berada di sebelah kanan

Teks ini berada di tengah

Teks ini berada di sebelah kiri

Oke jadi seperti itulah bagaimana cara menggunakan style di HTML 5, semoga tutorial sederhana ini dapat membantu kalian yang baru saja mempelajari HTML 5.

Jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial mengenai HTML 5 dan juga mengenai tips dan trik komputer lainnya ya.