July 18, 2024

Cascading Style Sheet (CSS) part #2

3 min read

Okay, di Cascading Style Sheet (CSS) part #1  telah kita pelajari cara sederhana menghias situs kita dengan CSS (table dan pop-up image). Nah, sekarang kita akan masuk lebih dalam lagi tentang CSS, dengan menggunakan contoh kemarin (yang bagian pop-up image).

klik [download id=”187″] untuk melihat Project yang akan kita buat kali ini.


Kali ini kita akan membuat CSS nya di file tersendiri, terpisah dengan file HTML. Dan, seperti yang terlihat pada CSS di bawah, kita menggunakan sesuatu yang agak lain dengan contoh kita sebelumnya. Kelebihan CSS yang berdiri sendiri adalah ia dapat digunakan pada banyak berkas HTML lainnya bilamana diperlukan. Yang perlu dilakukan hanyalah menambahkan tag HTML:

<link rel=”stylesheet” href=”direktori/tempat/file/css/namafile.css ” type=”text/css”>

Hal yang perlu diperhatikan pada penggunaan file-file eksternal adalah penempatan berkas-nya. Untuk kode ini, pastikan semua file terletak dalam satu direktori/folder yang sama. Berkas saya:


Berikut kode CSS nya (simpan dengan nama style.css).

[sourcecode language=”css”][/sourcecode]

<pre>
.thumbnail {
position:relative;
z-index:0;
cursor:pointer;
}

.thumbnail:hover {
background-color:transparent;
z-index:50;
}

.thumbnail span {
position:absolute;
background-color:lightyellow;
padding:5px;
left:-1000px;
border:1px dashed gray;
visibility:hidden;
color:black;
text-decoration:none;
}

.thumbnail span img {
border-width:0;
padding:2px;
}

.thumbnail:hover span {
visibility:visible;
top:0;
left:30px;
}
</pre>
[/sourcecode]

Dan, file HTML nya (simpan dengan nama pengenalan-css-02.html):

[sourcecode language=”css”]

<html>
<head>
<title>Belajar CSS #2</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
</head>

<body>
Pada kunjungan kami ke jambi expoo kemarin dalam rangka menyebarkan selebaran, kami menemui banyak hal menarik di dalamnya, seperti pameran kebudayaan dan produk dari daerah-daerah di Jambi. Contohnya dari <a href="#">Kabupaten Merangin<span><img src="foto1.jpg" /></span></a>, salah satu kabupaten di Jambi <a href="#">Batik-batik<span><img src="foto2.jpg" /></span></a> dari pun bertebaran pada acara tersebut. <i>Ohya</i>, ini <a href="#">perwakilan dari Jambi<span><img src="foto3.jpg" /></span></a>.
</body>
</html>

[/sourcecode]

Download foto yang dimaksud [download id=”188″]

Penjelasan:

Untuk file html, bagian yang penting adalah tag link dan tag a. Tag link untuk menghubungkan berkas CSS dengan berkas kita. Tag a untuk pop-up image nya.

Untuk kode CSS:

  • thumbnail adalah Class pada CSS. Penggunaan class ditandai dengan tanda baca “titik” di depan nama class tersebut.  Digunakan untuk membeda-bedakan format untuk satu tag html. Pada contoh kali ini, tag a html kita menggunakan class. Jadi bila tag a nya mengandung tulisan class=”thumbnail”, formatnya akan lain dengan tag a biasa.
  • position memosisikan element html menurut letak aslinya. Relative di sini artinya diposisikan secara relatif terhadap elementnya (seperti kode kita, tag a nya di mana, properti position akan menganggap itu sebagai titik permulaannya). Absolut berarti
  • z-index sama fungsinya seperti layer pada photoshop. Semakin bawah, semakin ‘terkubur’. Hanya dapat digunakan setelah properti position.
  • cursor, bentuk cursor mouse kita.
  • hover apa yang akan terjadi bila kita menggerakkan mouse di atas tag html tersebut (dalam hal ini tag a yang mengandung class thumbnail).
  • background-color warna latar belakang.
  • thumbnail span adalah format yang dikenakan terhadap tag span yang terdapat dalam tag a yang mengandung class thumbnail.
  • padding untuk jarak antara tulisan dengan border.
  • left mengatur letak sebelah kiri suatu objek html.
  • border—disebut juga garis pinggir—berguna untuk mengeset warna garis pinggir.
  • visibility untuk mengatur tampak atau tidaknya suatu objek dalam html. Hidden artinya tidak tampak.
  • color untuk mengeset warna tulisan.
  • text-decoration dekorasi teks. None berarti tidak ada dekorasi teks. Contoh: untuk hyperlink di html (tag a), selalu menggunakan garis bawah secara default.
  • thumbnail span img adalah format yang dikenakan terhadap tag img dalam tag span, yang terdapat dalam tag a yang mengandung class thumbnail.
  • border-width untuk mengatur lebar garis pinggir. Di sini kita menggunakan 0 yang berarti tidak ada garris pinggir.
  • thumbnail:hover span adalah apa format yang dikenakan terhadap tag span yang terdapat dalam tag a yang mengandung class thumbnail, pada saat di mouse lewat di atasnya.

Nah, kita juga bisa membuah pop-up table dan lainnya dengan kode tersebut. Tinggal ganti bagian <img> menjadi <table>. Jadi deh!

OK! Selesai juga artikelnya, Apabila Anda benar-benar tertarik untuk terjun ke dalam desain web/pemograman web/menggunakan CSS, Anda dapat melihat-lihat kode jadi yang banyak bertebaran di internet. Bila ingin menggunakan CSS untuk format dan layout web, bisa melihat-lihat contoh template yang bisa langsung digunakan—tapi jangan langsung digunakan—untuk dipelajari. Salah satu situs yang bisa Anda coba adalah www.freewebtemplates.com. Lainnya? Silahkan tanya ke mbah google :).

Selamat mencoba!

By: Tonny Sofijan

0 thoughts on “Cascading Style Sheet (CSS) part #2

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.