July 17, 2024

Cascading Style Sheet (CSS) part #1

2 min read

Cascading Style Sheet (CSS) adalah cara ‘mendadani’ situs kita secara efektif dan efisien. Mulai diimplementasikan di situs saat html sampai pada versi ke- 4.0 nya. Bila kode style nya dibuat dalam file/berkas tersendiri—yang biasanya dilakukan oleh para developer web—akan sangat membantu pekerjaan kita. CSS yang di tempatkan di file tersendiri disebut External Style Sheet. Berkas CSS tersebut berekstensi .css. Untuk mengerti tentang CSS, kita perlu mengerti tentang apa itu HTML dan/atau XHTML. Sebagai pembukanya, silahkan lihat contoh di bawah:

klik [download id=”105″] untuk melihat contoh 1

klik [download id=”106″] untuk melihat contoh 2

OK, tanpa berbasa-basi, kita akan masuk langsung ke kodenya. Ini file latihan-css.html kita.

langkah 1

kita tambahkan kode htmlnya, di bagian tag <body>…</body> lihat contohnya dibawah ini :

<div>
<table>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Email</th>

<th>Gender</th>
<th>Password</th>
</tr>
<tr>
<td>1</td>
<td>Tonny</td>
<td>tonny@yahoo.com</td>

<td>Pria</td>
<td>sofijan</td>
</tr>
<tr>
<td>2</td>
<td>Deice Mayangsari</td>
<td>deice.m@hotmail.com</td>

<td>Wanita</td>
<td>s3cr3t</td>
</tr>
<tr>
<td>3</td>
<td>Kurniawan Kosuma</td>
<td>iwake@gmail.com</td>

<td>Pria</td>
<td>3dmas</td>
</tr>
<tr>
<td>4</td>
<td>Andi Yuslain</td>
<td>ndie@gmail.com</td>

<td>Pria</td>
<td>ng4ntuzz</td>
</tr>
</table>
</div>

 

 

Yang di atas adalah tabel html yang biasa kita gunakan.

langkah 2

Nah, sekarang kita akan menambahkan style ke tabel kita di atas. Kita perlu menambahkan kode <style>…</style> di bagian tag <head>.

 

table {

border: 1px solid #0088ff;

}

tr:hover {

background: #ffaaff;

}

th {

padding: 2px 6px;

border: 1px solid #0088ff;

background: #0088ff;

color: white;

}

td {

padding: 2px 6px;

border: 1px solid #0088ff;

}

 

Seperti yang kita lihat di atas, cara memakai CSS sederhana hanyalah dengan mendeklarasikan tag html seperti table, tr, td, dsb, dan mengisi atributnya dalam tanda kurung kurawal, seperti kode di atas. Keterangan kode:

  • Border—disebut juga garis pinggir—berguna untuk mengeset warna garis pinggir.
  • Background berguna untuk mengatur latar.
  • Padding untuk jarak antara tulisan dengan border. 2px untuk bagian atas-bawah, dan 6px untuk kiri-kanan.
  • Color untuk mengeset warna tulisan.

Sedangkan tr:hover berguna untuk mengeset tampilan tag tr bila pointer mouse lewat di atas baris tr tersebut.

Sebagai tambahan terakhir, kita akan membuat beda antara baris genap dan ganjil untuk memperindah tampilan dan menghindari kesalahan pengguna memilih/melihat data baris.

langkah 3

Anda tinggal menambahkan baris ini di bawah kode tr:hover { … } pada tag script:

tr.alt

{

background: #ddddff;

}

 

Dan untuk data tr yang memiliki No. genap (Deice Mayangsari & Andi Yuslain), tag <tr> diubah menjadi <tr class=”alt”>.

 

Penjelasan kode:

  • tr.alt { … } digunakan untuk menset semua tag tr pada tabel yang memiliki atribut class=”alt”.

 

 

OK! Untuk sementara, sampai di sini aja dulu. Perlu diingat bahwa CSS adalah suatu hal yang perlu dikuasai bila kita ingin membangun suatu web, karena banyak hal yang hanya tersedia di CSS yang tidak akan kita temui (dan tidak bisa di set) di atribut html.

Untuk artikel selanjutnya akan dibahas tentang kode untuk contoh 2 di atas.

Selamat mencoba!

 

 

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

  1. @miro: harusnya tampil. Smoga adminnya cepat membereskan 🙂

    @sari: yep, dibuat di dalam satu file.

    @admin: tampaknya banyak yang error. kode seperti < dan > itu supaya tampil seperti ini: . Tulung dibenerin, bang admin, hehe.. tq

  2. @miro: harusnya tampil. Smoga adminnya cepat membereskan :).

    @sari: yep, dibuat di dalam satu file.

    @admin: tampaknya banyak yang error. kode seperti di atas yang ada &lt dan &gt itu harusnya tampil seperti ini: < dan &gt> Tulung dibenerin, bang admin, hehe.. thanks very much!

  3. bagi teman-teman yang ingin mencoba, silakan copy-paste kode-kode di atas ke file latihan-css.html, kemudian find-and-replace yang ada &lt\; dan &gt\; nya dengan tanda < dan >

  4. Guys, udah beres sekarang. bisa diikuti langkah-langkahnya.

    Thanks, Admin! 🙂

    Ohya, untuk link pengenalan css1, gambarnya ga keluar. Bagi yang ingin mencoba, bisa buka filenya, dan download. Kemudian lihat kodenya (pake php-coder, notepad, atau apa gitu, hehe). Trus tinggal masukkan file JPG sesuai dengan yang tertera di kode tersebut, dalam 1 direktori yang sama dengan file yang di download. Dan hopla, akan jalan dengan lancar! 🙂

Leave a Reply

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

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