Tutorial CSS Episode 1
Langsung mulai aja ya.. pertama buat script berikut :
<html>
<head><title> .:: BELAJAR CSS 1 ::.</title>
</head>
<body>
<button>TOMBOL</button>
</body>
</html>
Dan nanti tampilannya akan seperti ini :
Lalu buat script berikut diatas tag </head> :
<style type="text/css">
</style>
Script ini menandakan kita siap membuat script CSS dan kita akan membuat script CSSnya diantara script <style type=”text/css”> dan </style>
Tambahkan script CSS ini :
.tmbl{
background-color:gray;
}
Dan tambahkan juga attribut pada tag <button> menjadi <button class = “tmbl”>.
“.tmbl” = titik di awal, menandakan kita membuat sebuah class, dan jika tanda pagar (#) menandakan kita membuat id. Semua script yang dibuat diantara kurung kurawal awal dan kurung kurawal tutup itu akan menjadi scriptnya si tmbl. Jadi saat kita manggil class “tmbl” script yang diapit kurawalnya si “tmbl” akan jalan. Karena kita hanya membuat script CSSnya seperti yang diatas, tampilannya akan menjadi seperti ini :
Biar tambah menarik tambahkan script ini pada CSSnya menjadi seperti ini :
.tmbl{
background-color:gray;
color:red;
font-family:calibri, Times New Roman;
}
Hasilnya akan menjadi seperti ini :
Trus tambahkan script ini sehingga menjadi seperti ini :
.tmbl{
background-color:gray;
color:red;
font-family:calibri, Times New Roman;
width:120px; height:40px;
}
Dan seluruh scriptnya setelah kita edit-edit dan kita tambah-tambah script tadi menjadi seperti ini :
<html>
<head><title> .:: BELAJAR CSS 1 ::.</title>
</head>
<style type="text/css">
.tmbl{
background-color:gray;
color:red;
font-family:calibri, Times New Roman;
width:120px; height:40px;
}
</style>
<body>
<button class="tmbl">TOMBOL</button>
</body>
</html>
dan hasilnya akan menjadi seperti ini :
Untuk sekarang itu dulu yang kita pelajari. Untuk kelanjutannya, ditunggu aja, kita akan mengenal CSS lebih dalam lagi nanti..!
Ukie RPL
Jika ada truble silahkan langsung komen atau mengirim e-mail ke sini : ukiesigitaris@gmail.com
0 komentar: