Cara Membuat CSS
Dalam membuat CSS ada empat
hal utama yang perlu diketahui, yaitu:
1.
Selector, adalah bagian atau elemen website yang akan diatur
stylenya.
2.
Deklarasi, merupakan pernyataan yang menetapkan style yang berisi
Properti dan Nilai.
3.
Properti, adalah parameter tampilan yang akan kita atur.
4.
Nilai, merupakan ukuran yang itetapkan pada parameter properti.
Cara Penulisan CSS
Untuk menggunakan CSS ada tiga
cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan
External CSS.
1. Inline CSS
Adalah penulisan CSS didalam
elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan
selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai
gantinya, kita menggunakan tag style="..." pada elemen tersebut.
Contoh penulisan Inline CSS:
Contoh penulisan Inline CSS:
<p style="margin:10px;">
Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (") kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).
2. Embedded CSS
Adalah penulisan CSS secara tersendiri namun berada dalam satu file
html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS
ditulis didalam tag <style>...</style>. kita bisa menuliskan beberapa
selector beserta deklarasi properti dan nilai didalam tag <style> ini.
3. Eksternal CSS
Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan
website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam
sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang
telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan
mengelola sebuah website.Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <link rel="stylesheet" type="text/css" href="style.css">.
Berikut Markup Html yang saya
gunakan untuk membuat table:
<html>
<head>
<title>Data Mahasiswa</title>
<link rel="stylesheet" type="text/css" href="stylelink.css">
</head>
<body>
<table border="3">
<th>No</th>
<th>Nama Lengkap</th>
<th>Kota Asal</th>
<th>Nim</th>
<tr class="No">
<td>1</td>
<td>Amal Triadi</td>
<td>Pontianak</td>
<td>201512086</td>
</tr>
<tr id="No">
<td>2</td>
<td>Chandra Ade</td>
<td>Bengkulu</td>
<td>201512087</td>
</tr>
<tr class="No">
<td>3</td>
<td>Tri Widianto</td>
<td>Wonogiri</td>
<td>201512088</td>
</tr>
<tr id="No">
<td>4</td>
<td>Abdul Haris</td>
<td>Ternate</td>
<td>201512089</td>
</tr>
<tr class="No">
<td>5</td>
<td>Aldi Satriani</td>
<td>Bali</td>
<td>201512100</td>
</tr>
</table>
</body>
</html>
Dan dibawah ini adalah kode css
untuk me-link kan antara html dan css:
table{
border-collapse: collapse;
border:1px solid white;
width: 500px;
height: 250px;
}
th{
background-color: skyblue;
color: black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
tr.no{
text-align: center;
background-color: #eee;
}
tr.no:hover{
background-color: pink;
color: blue;
}
tr#no{
text-align: center;
background-color: yellowgreen;
}
tr#no:hover{
background-color: green;
color: white;
}
Hasilnya setelah dijalankan html
sebelum di link kan:
Hasilnya setelah dijalankan html
sesudah di link kan:
Tidak ada komentar:
Posting Komentar