Friday, June 2, 2017

Modul 4, HTML dengan Style CSS

Membuat CSS pada tag table
Disini saya akan memakai inline CSS dimana sintak CSS langsung di masukan di dalam file utama sebagai contoh saya memasang CSS pada tag table sebagai berikut



Kita hanya mengetikan <style type=”text/css”>
Tag_yang_ingin_ada_cssnya (table)  {style_cssnya (color) : isi dari_stylenya blue;
}
</style>
Hasilnya


berikutnya kita akan coba menyajikan gambar yang memakai Style CSS, berituk codingnya.

<h1> Gambar Transparan</h1>
<style>
div.img{
            margin:5px;
            padding:5px;
            border:1px solid #0000ff;
            height:auto;
            widht:auto;
            float:left;
            text-align:center;

}
div.img img {
            display:inline;
            margin:5px;
            border:1px solid #ffffff;

}
div.img  a:hover img{
            border: 1px solid #0000ff;
 opacity:0.5;
}
div.desc{
            text-align:center;
            font-weight:normal;
            width:120px;
            margin:5px;
}
</style>

<div class="img">
<a target="_blank" href="twitter.com"><img src="tw.jpg" alt="1" width="110" height="90"></a>
</div>

<div class="img">
<a target="_blank" href="instagram.com"><img src="ig.jpg" alt="we" width="110" height="90"></a>
</div>

<div class="img">
<a target="_blank" href="facebook.com"><img src="fb.png" alt="1" width="110" height="90"></a>
</div>
<br>
<br>
<br>
<br>
<br> <br> <br>
<p> Note : Arahkan Mouse ke gambar </p>

maka hasilnya akan ada gambar yang jika kita arahkan mouse ke gambar tersebut akan nampak transparan (ga sepenuhnya transparan si).

Terima kasih telah mampir sampai berjumpa lain waktu.

0 komentar:

Post a Comment