Contoh Penggunaan CSS dengan HTML | Hubungan antara CSS dan HTML. CSS ( Cascading Style Sheets) adalah merupakan bahasa pemrograman yang dipergunakan untuk membuat halaman web yang ditulis dengan kode HTML atau XHTML. Sesuai dengan namanya, CSS digunakan untuk mengatur Style atau tampilan dari sebuah website seperti pengaturan font, warna dan bentuk font, background, dsb. Kelebihan CSS adalah memungkinkan Anda untuk mengontrol tampilan halaman situs secara bersamaan dari satu file (file .css).
Gimana
seh cara menggunakan CSS ?? Misalkan kita akan membuat tabel daftar
nilai menggunakan CSS maka yang pertama adalah kita buat dulu html-nya
setelah itu baru dibuat CSS-nya lihat coding dibawah ini :
<body>
<table align = "center" border = "1">
<tr>
<td>
<div id="headerTabel">
<div>Hasil Studi Semester III Tahun Akademik 2010-2011</div>
<div><u>Universitas CANGKRUAN</u></div>
</div>
<div id = "headerTabel2">
<p>
<div >
Nama : NAMA ANDA
</div>
<div >
NIM : NIM ANDA
</div>
<div >
Fakultas : FAKULTAS ANDA
</div>
</p>
</div>
<table id = "hasilStudi" border ="1">
<tr class = "alt3">
<th>No.</th>
<th>Kode</th>
<th>Mata Kuliah</th>
<th>B/U</th>
<th>SKS</th>
<th>Nilai</th>
<th>AK</th>
</tr>
<tr class = "alt2">
<td>1</td>
<td>IT112E</td>
<td>Aljabar Linear dan Matriks</td>
<td>B</td>
<td>3</td>
<td>BC</td>
<td>7.5</td>
</tr>
<tr class = "alt">
<td>2</td>
<td>IT114P</td>
<td>Bahasa Inggris Profesi 2</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt2">
<td>3</td>
<td>IT250F</td>
<td>Algoritma dan Struktur Data Lanjutan</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt">
<td>4</td>
<td>IT209E</td>
<td>Pemrograman Berorientasi Objek</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt2">
<td>5</td>
<td>IT113J</td>
<td>Pendidikan Pancasila</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt">
<td>6</td>
<td>IT233L</td>
<td>Organisasi dan Ars. Komputer</td>
<td>B</td>
<td>2</td>
<td>A</td>
<td>8.0</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<table align = "center" border = "1">
<tr>
<td>
<div id="headerTabel">
<div>Hasil Studi Semester III Tahun Akademik 2010-2011</div>
<div><u>Universitas CANGKRUAN</u></div>
</div>
<div id = "headerTabel2">
<p>
<div >
Nama : NAMA ANDA
</div>
<div >
NIM : NIM ANDA
</div>
<div >
Fakultas : FAKULTAS ANDA
</div>
</p>
</div>
<table id = "hasilStudi" border ="1">
<tr class = "alt3">
<th>No.</th>
<th>Kode</th>
<th>Mata Kuliah</th>
<th>B/U</th>
<th>SKS</th>
<th>Nilai</th>
<th>AK</th>
</tr>
<tr class = "alt2">
<td>1</td>
<td>IT112E</td>
<td>Aljabar Linear dan Matriks</td>
<td>B</td>
<td>3</td>
<td>BC</td>
<td>7.5</td>
</tr>
<tr class = "alt">
<td>2</td>
<td>IT114P</td>
<td>Bahasa Inggris Profesi 2</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt2">
<td>3</td>
<td>IT250F</td>
<td>Algoritma dan Struktur Data Lanjutan</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt">
<td>4</td>
<td>IT209E</td>
<td>Pemrograman Berorientasi Objek</td>
<td>B</td>
<td>3</td>
<td>A</td>
<td>12.0</td>
</tr>
<tr class = "alt2">
<td>5</td>
<td>IT113J</td>
<td>Pendidikan Pancasila</td>
<td>B</td>
<td>2</td>
<td>B</td>
<td>6.0</td>
</tr>
<tr class = "alt">
<td>6</td>
<td>IT233L</td>
<td>Organisasi dan Ars. Komputer</td>
<td>B</td>
<td>2</td>
<td>A</td>
<td>8.0</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Nah
jika sudah buat HTML-nya sekarang kita buat CSS-nya, oh iya
teman-teman untuk pemanggilan CSS ini jika dibuat #header misalnya maka
pemanggilan CSS header harus menggunakan id ="header"kalau menggunakan .header pemanggilan nya menggunakan class = "header".
CSS untuk code diatas :
#hasilStudi {font-family : "Arial"; width : 100%; color : black;
text-align : center; border-collapse : collapse; border : 1px solid #000000;
}
#hasilStudi td {
font-size : 12; color:blue;
}
#hasilStudi tr.alt td {
color:blue; background-color:#EAF2D3;
}
#hasilStudi tr.alt2 td {
color:green;
}
#hasilStudi tr.alt3 th {
color : black; background-color: yellow; text-align : center; font-size : 12;
}
#headerTabel {
font-family : "Times New Roman"; font-size : 15;
color : black; text-align :center;
}
#headerTabel2 { align : justify; font-family :"Cambria"; font-size : 11;}
#tabelLuar { table-align : center;}
Artikel saya fafan ini tentang Contoh Penggunaan CSS dengan HTML
Tidak ada komentar:
Posting Komentar