Pelajari css part 1
Pertama siapkan edit scriptnya,bisa notepad,phpdesigner,dsb.dan jangan lupa liat dengan browser anda. :)disini kita belajar membuat font berwarna,jenis huruf.
perlu anda ingat, jika anda menulis class="contoh" maka di script cssnya anda ketik .contoh namun jika anda mengetik id="contoh" maka ketik di script cssnya dengan #contoh .
<style type="text/css">
#teks{
color:blue; /*---- ini adalah warna dari font----*/
font-family: arial; /*---jenis tulisan----*/
font-size:10px;
}
</style>
<a id="teks">belajar css part 1</a>
#teks{
color:blue; /*---- ini adalah warna dari font----*/
font-family: arial; /*---jenis tulisan----*/
font-size:10px;
}
</style>
<a id="teks">belajar css part 1</a>
Hasil :
belajar css part 1
gimana gan udah jadi seperti contoh?
nah kita lanjut yugs part ke 2.
kita membuat kotak seperti menu.
pelajari css part 2
<style type="text/css">
#kotak{width:80px; /*--------panjang kotak--------*/
background:#ccc; /*---warna kotak-----*/
padding:5px; /*-----------jarak di dalam kotak dengan isi kotak -------*/
font-size:14px;
color:black;
font-family: arial;
}
#kotak:hover{ background:#fff; /*----warna yang akan berubah menjadi biru----*/}
</style>
<div id="kotak">kotak menu</div>
#kotak{width:80px; /*--------panjang kotak--------*/
background:#ccc; /*---warna kotak-----*/
padding:5px; /*-----------jarak di dalam kotak dengan isi kotak -------*/
font-size:14px;
color:black;
font-family: arial;
}
#kotak:hover{ background:#fff; /*----warna yang akan berubah menjadi biru----*/}
</style>
<div id="kotak">kotak menu</div>
keterangan -> :hover berguna merubah seperti yang di perintahkan.di situ saya hanya merubah warna kotak jika di sorotkan.
Hasil :
Tidak ada komentar:
Posting Komentar