Pengenalan CSS untuk Pemula
Di dalam CSS terdiri dari Selektor, deklarasi, Properti dan Nilai. Class dan id merupakan selektor pada CSS. Berikut ini perbedaan dari class dan id.
CLASS
Selector Class adalah selector yang digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.
- Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja
- Class bisa digunakan dilebih dari satu elemen
- Bisa menggunakan lebih dari satu nama Class pada satu elemen
- Tidak boleh diawali oleh angka
- Tidak boleh mengandung special characters
Penulisan CSS
Penulisan Class pada CSS diawali oleh "." titik diikuti oleh selector Class nya.
.sidebar{float: left; background: white;}
.sidebar1{width: 100px}
.sidebar2{width: 200px}ID
Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti National ID, atau nomor KTP yang hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan selector ID.
- Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja
- Tidak boleh ada ID lebih dari satu
- Tidak boleh diawali oleh angka
- Tidak boleh mengandung special characters (~ ! @ # $ %)
#header{margin: auto; width:100%; height: 100px; background:#3F51B5}Penulisan ID
Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.
Nah, sekarang bagaimana memangil CSS pada HTML? Perhatikan dan pelajari kode sederhana berikut ini!
<html>
<head>
<title>Pengenalan CSS untuk Pemula - Jember Developer</title>
<style type="text/css"> /* tag pembuka untuk menempatkan CSS internal */
body{width:100%; margin:auto;}
h1, h2{margin:auto; color:#FFFFFF; font-size:24px; text-align:center;}
#header{margin: auto; width:100%; height: 100px; background:#3F51B5}
#konten {width:750px; height:500px; float:left; background:#CFD8DC;}
.sidebar{float: right;}
.sidebar1{width: 300px; height:500px; background:#E91E63}
.sidebar2{width: 250px; height:500px; background:#4CAF50}
</style>
<head>
<body>
<!-- Pemanggilan CSS ID -->
<div id="header">
<h1>Ini tampilan dari CSS header</h1>
</div>
<!-- Pemanggialan CSS ID untuk konten -->
<div id="konten"><h1>Ini bagian konten</h1></div>
<!-- Pemanggilan CSS Class -->
<div class="sidebar sidebar1"><h2>Ini sidebar 1</h2></div>
<div class="sidebar sidebar2"><h2>Ini sidebar 2</h2></div>
</body>
</html>
Simpan kode di atas dengan ekstensi .html lalu buka dengan browser dan lihat tampilannya.
Bagaimana kalo tanpa CSS? Silahkan dicoba hapus CSS nya dan lihat perbedaannya.
Mungkin itu saja postingan kali ini, semoga bermanfaat. Apabila ada pertanyaan silahkan bertanya pada kolom komentar di bawah. Selamat belajar! 😀
