Pada pertemuan matakuliah pemrograman web kali ini, kami 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.
<html>
<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
0 comments:
Post a Comment