kali ini saya akan memberi gambaran tentang CSS.
CSS berfungsi untuk mempercantik atau memperindah tampilan HTML.
sebenarnya CSS dibagi menjadi tiga yaitu: Inline,Internal, dan eksternal. pagi ini saya akan membahas yang eksternal
sebelumnya siapkan alat alatnya.
1. Notepad ++
2. Browser
Pertama silahkan buka Notepad++ kemudian copy script dibawah ini:
<html>
<head>
<title> Table </title>
<link href=csstable.css rel=stylesheet type=text/css>
</head>
<body>
<table border width=250>
<tr align=center>
<th> No </th>
<th> Nama Siswa </th>
<th> Kelas </th>
</tr>
<tr align=center>
<td> 1 </td>
<td> Imam </td>
<td> X TKJ 1 </td>
</tr>
<tr align=center>
<td> 2 </td>
<td> Febri </td>
<td> X TKJ 1 </td>
</tr>
<tr align=center>
<td> 3 </td>
<td> Bangkit </td>
<td> X TKJ 1 </td>
</tr>
script diatas adalah script HTML jadi lilahkan save dengan cara klik file kemudian save dan menyimpannya dengan ekstensi .html (contoh csstable.html)
nb: yang berwarna merah adalah nama css yang akan kita buat. jadi harus sama agar bisa memanggil cssnya.
silahkan buka html tersebut dengan browser maka hanya akan tampil seperti berikut:
dan berikut kita buat CSSnya untuk mempercantik tampilannya.
silahkan copy script css berikut:
/* CSS Document */
TH {
color : #FFFFFF;
background-color : #336699;
border-width : 1px ;
border-style :solid;
border-color :red;
font-size: 9pt;
}
TD {
color : red;
background-color : #E6E6FA;
border-width : 1px ;
border-style :solid;
border-color :blue;
font-size: 9pt;
}
sekarang kita simpan css tapi ingat kita menyimpan css pada satu folder dalam html yang telah kita buat tadi.
dan berikut tampilan jika sudah diberi CSS:
lebih menarik kann....
selamat mencoba
Tidak ada komentar:
Posting Komentar