HTML Styles

HTML Styles

    HTML Styling

Html style atau gaya pada html, karena setiap elemen mempunyai gaya standar yaitu backgroundnya berwarna putih, teks berwarna hitam, dengan ukuran 12px.

Dengan menggunakan atribut style, kita dapat mengubah style default pada elemen html terebut.

Contoh dibawah ini mengubah warna background yang default menjadi lightgrey. Buat koding seperti gambar dibawah ini menggunakan aplikas html sesuai dengan aplikasi yang kalian gunakan.

Kita liat previewnya dibawah ini

               

Setelah dilihat dan ditrawang :v  eh.. warnanya berubah dari default  menjadi lightgrey.

Pada html versi yang lama, background-color attribute masih terdukung, tapi tidak valid di html5.

HTML Style Attribute

Atribut stye pada html mempunyai syntax seperti dibawah ini:

Style=” property : value”

Property tersebut adalah css property, dan value tersebut adalah sebuah css value.

Lihat contoh dibawah ini, dan buatlah koding seperti gambar dibawah ini:            

Saya menambahkan warna pada heading1 dan paragraph seperti syntax diatas.

Kalian bisa mengubah warna sesuai keinginan kalian. Dan dibawah ini adalah previewnya             

             

HTML Text Fonts

Font-family property menentukan jenis font yang akan digunakan untuk sebuah elemen html, syntaxnya sama seperti syntaxnya text color, langsung saja lihat gambar dibawah ini, setelah itu buat koding seperti dibawah ini :

Seperti gambar diatas, saya menggunakan “family-font:verdana” dan “family-font:courier”, tapi terserah kalian mau pake font apa saja, yang kalian hafal dan kalian sukai :D, dibawah ini adalah previewnya

Tag <font> tidak valid pada html5, tetapi masih bisa support di html versi lawas.

HTML Text size

Font-size property mendefinisikan ukuran teks pada elemen html. Jadi setiap heading atau paragraf bisa diubah ukuran teksnya sesuai keinginan kita. Lihat gambar dibawah ini dan buatlah koding seperti gambar tersebut :

Saya menggunakan ukuran 100px (100 piksel) untuk h1 dan 60px (60 piksel) untuk p, kalian bisa mengubah ukuran tersebut sesuai kebutuhan dan keinginan kalian. Dibawah ini adalah previewnya :

5.       HTML Text Alignment

Text-align property mendefinisikan posisi teks horizontal pada sebuah elemen html, jadi kita bisa mengubah posisi teks dari kiri ke tengah atau ke kanan, yang penting horizontal. Langsung lihat pada gambar koding dibawah ini, buatlah coding seperti gambar dibawah ini :

Seperti gambar diatas, saya menggunakan “text-align:center” dan “text-align:left”, kalian juga bisa mengubah text-align sesuai keinginan kalian. Dibawah ini adalah gambar previewnya:

Tag <center> tidak support pada html 5, tapi support di html versi yang lawas.

Ringkasan dari materi diatas :

Gunakan style atribute untuk mengubah gaya pada elemen html.
Gunakan backgroud-color untuk mengubah warna background pada html.
Gunakan color untuk mengubah warna teks pada elemen html.
Gunakan font-family untuk mengubah gaya teks pada elemn html.
Gunakan font-size untuk mengubah ukuran  teks pada elemen html.
Gunakan text-align untuk mengubah posisi teks pada elemen html.

Alhamdulillah selesai materi tentang HTML Styles, sekarang juga kalian bisa mencobanya dan memahaminya. Sampai jumpa di materi selanjutnya :D ariatou gozaimasu.

Terimakasih semoga bermanfaat.

Translated from w3schools.com

Created by Gugus Widiandito-Project X