Type something and hit enter

ads here
On
advertise here
Pengelan CSS untuk Pemula - Jember Developer
Halo, pada posting sebelumnya kita sudah bahas tentang Struktur Dasar HTML, nah pada posting ini kita akan membahas tentang Cascadin Style Sheet atau CSS. HTML dan CSS saling berkaitan, HTML tidak akan terlihat bagus tanpa CSS. Peran CSS di sini sebagai pengatur tampilan suatu website, ibarat lukisan HTML adalah kanvas dan CSS adalah cat.

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! 😀

Click to comment