Rabu, November 23, 2016
Dalam tutorial ini saya ingin membagikan ilmu tentang bagaimana menyisipkan properti css ke dalam elemen-elemen yang ada di html menggunakan perintah style. tapi kok judulnya belajar html style? bukan belajar properti css? sebagian sobat mungkin ada yang bertanya seperti itu.
Oke, saya jelaskan kenapa saya menggunakan kalimat "properti css", sedikit menjelaskan tentang css.
Pengertian CSS
CSS singkatan dari Cascading Style Sheets, lebih jelasnya css digunakan untuk memanipulasi elemen-elemen yang ada di html, misalnya kita ingin merubah ukuran font, merubah warna font, merubah jarak antara elemen satu dengan elemen lainnya. agar lebih jelas perhatikan contoh penggunaan properti css di dalam kode html memakai metode style di bawah ini :
<html>
<head><title>Belajar Html Style</title></head>
<body>
<h1><p>belajar html style di blog aisyahandyra.blogspot.co.id</p></h1>
<h3>belajar html style itu ternyatan menyenangkan.</h3>
<h1><p style="color:red">Paragrap ini memakai metode style html</p></h1>
</body>
</html>
Silahkan copy dan pastekan kode diatas ke editor sobat, jangan lupa untuk menyimpan dengan ekstensi .html, misal simpan dengan nama style.html. setelah disimpan coba jalankan dengan dobel klik, hasilnya kurang lebih seperti di bawah ini :
Paragraph yang berwarna merah itu sudah memakai properti yang ada di css, dengan cara kita menuliskan properti css didalam elemen paragraph tadi menggunakan metode style atau stylling. Properti css yang kita pakai adalah properti color, properti css itu tidak akan berfungsi atau berpengaruh ke tampilan apabila tidak kita beri value nya, value dari properti color adalah 'red'.
Contoh penggunaan properti css diatas adalah merubah default warna dari elemen paragraph, default warna dari elemen paragraph berwarna hitam dan kita telah merubahnya menjadi merah. Tidak hanya itu, kita juga bisa merubah ukuran font tersebut sesuai keinginan kita.
Agar lebih jelas dan paham, mari kita buat satu contoh lagi.
<html>
<head><title>Belajar Html Style</title></head>
<body>
<p style="font-size:10px;">Paragraph ini ukuran font nya adalah 10 pixel.</p>
</body>
</html>
Simpan dan jalankan kode tersebut, hasilnya kurang lebih seperti ini :
Perhatikan ukuran font dari paragraph diatas, kecil sekali kan, sobat pasti tau sebabnya, sebab kita sudah memberikan value '10 pixel' didalam properti 'font-size'.
Selamat mencoba, semoga bermanfaat.