loading...

CSS Dasar: Selector

Selector pada CSS digunakan untuk mengenali sebuah elemen HTML yang akan diberi style. Jadi, CSS bisa diidentifikasi dari selector sederhana hingga yang kompleks antara lain: elemen HTML, id, class, dan complex selector. Untuk memahami satu-persatu dari penerapan selector, yuk kita ngoding lagi pada dokumen HTML dan CSS berikut.

Elemen HTML: selector sederhana

Selector ini tentu ada pada setiap elemen HTML yang akan dikenai style CSS. Kali ini pada <body> dan <p>.

<!DOCTYPE html>
<html>
<head>
   <title>CSS Dasar</title>
   <link rel="stylesheet" href="selector-style.css">
</head>
<body>
   <h1>Hello Dulur!</h1>
   <p>Selamat belajar CSS.</p>
   <p>@jowokode</p>
</body>
</html>
/*mengubah semua font pada <body>*/
body {
   font-family: arial;
}

/*cari semua <p> dan ubah warnanya*/
p {
   color: darkgreen;
}

Elemen HTML: operator koma (,)

Tanda koma menandakan 'dan' atau dapat juga diartikan elemen satu dengan elemen setelah koma dapat dikenal style CSS yang sama. Kita coba dengan dokumen HTML yang sama seperti diatas dengan file CSS berikut.

 body {
   font-family: arial;
}

/*cari semua <h1> dan <p> dan ubah jadi cetaak miring*/
p, h1 {
   font-style: italic;
}

Elemen HTML: operator spasi (yang ada di dalam)

Tanda spasi setelah elemen menandakan bahwa elemen kedua berada didalam elemen pertama. Contohnya <p> yang berada/ dibungkus didalam <div>.

<!DOCTYPE html>
<html>
<head>
   <title>CSS Dasar</title>
   <link rel="stylesheet" href="selector-style.css">
</head>
<body>
   <h1>Hello Dulur!</h1>
   <p>Selamat belajar CSS.</p>
   <div>
      <p>@jowokode</p>
   </div>
</body>
</html>
body {
   font-family: arial;
}

/*contoh <p> didalam <div>: ubah jadi cetak tebal*/
div p {
   font-weight: bold;
}


id : menggunakan tanda pagar (#)

Sebuah elemen HTML hanya boleh memiliki 1 id. Setiap halaman hanya boleh memiliki 1 elemen dengan id. Id juga digunaka sebagai penanda adanya link. Sebaikya tidak digunakan untuk CSS, lebih tepat menggunakan class.

<!DOCTYPE html>
<html>
<head>
   <title>CSS Dasar</title>
   <link rel="stylesheet" href="selector-style.css">
</head>
<body>
   <h1 id="judul">Hello Dulur!</h1>
   <p>Selamat belajar CSS.</p>
   <div>
      <p>@jowokode</p>
   </div>
</body>
</html>
body {
   font-family: arial;
}

/*kode id dengan tanda pagar*/
#judul {
   font-size: 50px;
   color: red;
}


Class : menggunakan titik (.)

Kelas yang sama dapat digunakan pada beberapa elemen HTML. Satu elemen HTML boleh memiliki banyak kelas yang dipisahkan oleh spasi.

<!DOCTYPE html>
<html>
<head>
   <title>CSS Dasar</title>
   <link rel="stylesheet" href="selector-style.css">
</head>
<body>
   <h1>Hello Dulur!</h1>
   <p>Selamat belajar CSS.</p>
   <div>
      <p class="instagram">@jowokode</p>
   </div>
</body>
</html>
body {
   font-family: arial;
}

/*kode class dengan tanda titik*/
.instagram {
   color: blue;
   text-decoration: underline;
}


Nah itu dari beberapa selector, kita juga bisa menggabungkan ketiga contoh kodingan yang telah kita buat. Nah aku bikin tugas buat kalian "Silahkan gabungkan selector pada elemenHTML + id + class !". Hasil kodingannya kirim di kolom komentar yaa. 

Baiklah cukup materi CSS kali ini, mari terus belajar dan jangan takut untuk selalu mencoba. Sampai jumpa di materi CSS Dasar selanjutya. Tetap yakin pada potensi diri dan semangat berkarya kawan!


0 Comments

Leave a comment