Pada pertemuan
matakuliah pemrograman web kali ini sedang membahas tentang dasar-dasar CSS (Cascading
Style Sheet) yaitu berbagai jenis selektor yang sering digunakan di CSS.
Sebelum membahas lebih jauh tentang selektor CSS, berikut saya berikan beberapa
poin penting tentang CSS yang perlu diketahui :
-
- Menurut Wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
- CSS bukan merupakan bahasa pemrograman.
- CSS dikembangkan oleh World Wide Web Consortium (W3C).
-
Jenis-jenis
Selektor CSS :
Selektor tag atau selektor elemen
Selektor Pseudo-kelas
Selektor Kelas
Selektor ID
Selektor Keturunan
Selektor ortu-anak
Selektor bersebelahan
Selektor Atribut
Selektor Pseudo-elemen
Selektor universal
Penggabungan Selektor
Pada
pertemuan kali ini kita hanya akan membahas 3 selektor, yakni selektor ID, tag
dan kelas.
1. Selektor ID
Ciri-cirinya :
- Selektor ID diawali dengan tanda #
#atas {
background:#FF0000;color:#FFFFFF;font-size:50px;text-align:center;
}
2. Selektor Tag
Ciri-cirinya :
- Nama selektor berupa nama Tag
h1 {
color:#000000;
}
3. Selektor Kelas
- Diawali dengan tanda titik
- Bisa diterapkan hanya pada elemen tertentu
- Sebuah elemen bisa mempunyai lebih dari satu kelas
- Di dalam atribut class, nama-nama kelas dipisahkan oleh spasi
.isi {
font-family:'Verdana';font-size:30px;color:#0000FF
}
ul {
color:#000000;font-size:20px;
}
Setelah memahami pengertian masing-masing selektor diatas, selanjutnya
kita akan menggabungkan ketiga selektor diatas menjadi satu file CSS.
#atas {
background:#FF0000;color:#FFFFFF;font-size:50px;text-align:center;
}
h1{
color:#000000;
}
.isi {
font-family:'Verdana';font-size:30px;color:#0000FF
}
ul {
color:#000000;font-size:20px;
}
Lalu simpan dengan nama css1.css
Langkah selanjutnya, kita akan memasukkan file CSS diatas ke dalam file
HTML baru.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Latihan-CSS-2</title>
<link rel="stylesheet" href="css1.css" type="text/css" />
</head>
<body background="Tulips.jpg">
<div id="atas">
Toko Online Pascal
</div>
<h1> Deskripsi :</h1>
<div class="isi">
Toko Online menyediakan berbagai macam barang-barang baru maupun bekas dengan harga yang terjangkau.</div>
<h1> Menyediakan :</h1>
<ul type="disc">
<li>Laptop
<li>TV
<li>Kulkas
<li>dll.
</ul>
</body>
</html>
Tulisan yang
diblok merah adalah script untuk memasukkan file CSS ke dalam file HTML
Screenshot :
Jika ingin
download file selengkapnya, bisa download disini
Referensi :
Kadir, Abdul. (2011). From Zero to be a Pro: CSS Tip dan Trik untuk menyertakan Cascading Style Sheets dalam halaman Web.Yogyakarta: Andi Offset.
Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3.Jasakom.
||Berbagi Itu Indah||
.jpg)
No comments:
Post a Comment