Pengertian Selector CSS
Karena instruksi CSS digunakan untuk mengubah atau memanipulasi tampilan dari element HTML, CSS membutuhkan sebuah cara untuk mengaitkan atau menghubungkan instruksi CSS dengan tag HTML yang sesuai atau yang diinginkan. Hal inilah yang dimaksud dengan Selector dalam CSS.
Pengertian Property CSS
Property CSS yaitu jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS mempunyai puluhan property yang sanggup digunakan semoga menampilkan hasil tamat yang kita inginkan. Hampir semua property dalam CSS sanggup digunakan untuk seluruh selector. Jika selector digunakan contohnya untuk “mencari seluruh tag <p>“, maka property yaitu “efek apa yang ingin dimanipulasi dari tag p tersebut“, menyerupai ukuran text, warna text, jenis fontnya, dll.
Pengertian Value CSS
Value CSS yaitu nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya sanggup berupa red, blue, black, white dan lain-lain.
Untuk lebih jelasnya wacana selector, property dan value pada CSS, sanggup dilihat pada gambar dibawah ini:
Untuk lebih memudahkan teman-teman sanggup 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></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></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 menyerupai 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 wacana Eksternal Style sanggup dibaca tutorial nya disini. Oke kita lanjutkan sehabis teman-teman menuliskan code CSS diatas, teman-teman sanggup menyimpan nya dengan nama style.css dan letakkan pada folder yang sama dengan index.html dan silahkan teman-teman menjalankan nya pada browser.
Sedikit klarifikasi wacana code CSS di atas, yang menjadi Selector nya yaitu #judul dan #paragraf, yang menjadi Property nya yaitu font-size dan color, dan lalu yang menjadi value nya yaitu red, 30px, blue, dan 1em.
Sekian pengenalan kita wacana Selector,Property dan Value untuk penggunaan CSS selanjutnya akan aku bahas pada tutorial selanjutnya.
No comments:
Post a Comment