Mengenal Selector, Property dan Value pada CSS
Pengertian Selector CSS
Karena kode CSS digunakan untuk mengubah atau memanipulasi tampilan dari element HTML, CSS membutuhkan sebuah cara untuk mengaitkan atau menghubungkan kode CSS dengan tag HTML yang sesuai atau yang diinginkan. Hal inilah yang dimaksud dengan Selector dalam CSS.
Pengertian Property CSS
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector. Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna text, jenis fontnya, dll.
Pengertian Value CSS
Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, white dan lain-lain.
Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada gambar dibawah ini:
Untuk lebih memudahkan teman-teman dapat mencoba nya silahkan buka text editor teman-teman dan tulis code HTML di bawah ini dan simpan dengan nama index.html.
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1 id="judul">Judul Artikel</h1>
<p id="paragraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
<html>
<head>
<title>Point Website</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1 id="judul">Judul Artikel</h1>
<p id="paragraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
kemudin kita tulis code untuk CSS nya seperti berikut :
#judul {
font-size:30px;
color: blue;
}
#paragraf {
color:red;
font-size: 1em;
}
font-size:30px;
color: blue;
}
#paragraf {
color:red;
font-size: 1em;
}
Pada code di atas kita menghubungkan HTML dan CSS mengunakan Eksternal Style untuk yang belum mengerti tentang Eksternal Style dapat dibaca tutorial nya disini. Oke kita lanjutkan setelah teman-teman menuliskan code CSS diatas, teman-teman dapat menyimpan nya dengan nama style.css dan letakkan pada folder yang sama dengan index.html dan silahkan teman-teman menjalankan nya pada browser.
Sedikit penjelasan tentang code CSS di atas, yang menjadi Selector nya adalah #judul dan #paragraf, yang menjadi Property nya adalah font-size dan color, dan kemudian yang menjadi value nya adalah red, 30px, blue, dan 1em.
Sekian pengenalan kita tentang Selector,Property dan Value untuk penggunaan CSS selanjutnya akan saya bahas pada tutorial selanjutnya.
nice information min
ReplyDeleteelemen solder