Mengenal Jenis Selector pada bahasa pemrograman CSS
Mengenal Jenis-jenis Selector pada bahasa pemrograman CSS
 |
| mengenal selector CSS |
Pengertian Selector pada CSS
Selector adalah sebuah tag html yang digunakan pada css agar elemen tersebut dapat dimanipulasi atau ditambahkan gaya pada css. Selector dapat berupa tag html itu sendiri, atau berupa nilai atribut class atau id pada tag HTML.Didalam selector ada dua bagian penting yang perlu diketahui yakni property dan value (nilai) yang fungsinya untuk memberi gaya dari selector yang dipilih tersebut. Hal ini sudah kami jelaskan pada artikel sebelumnya.
Jenis-jenis Selector
1. Universal selector, merupakan selector yang bertujuan untuk memanggil semua tag pada HTML untuk diberikan style. US ini hanya ada 1 didalam CSS yaitu tanda “*(bintang)”. perhatikan contoh berikut :
* {
Color : blue;
Background-color : green;
}
Color : blue;
Background-color : green;
}
Pada kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan background berwarna hijau.
2. Type selector, merupakan selector yang digunakan adalah nama dari tag HTML itu sendiri dan seluruh tag HTML yang memilki kesamaan nama akan ditangkap oleh selector ini. Contoh :
H1 {
Color : red;
}
P {
Color : yellow;
}
Color : red;
}
P {
Color : yellow;
}
Dari kode CSS diatas bermaksud untuk mengubah semua tulisan yang ada pada tag H1 menjadi warna merah dan pada tag p berwarna kuning.
3. Id selector, merupakan atribut yang digunakan untuk pemanggilan tag HTML yang telah diberikan nama didalamnnya seperti id=”judul”. dan untuk pemanggilannya harus diawali dengan tanda ‘#(pagar)’.
dan perlu teman-teman ketahui id selector hanya digunakan untuk 1 elemen yang ingin diberi gaya. Agar lebih jelas perhatikan contoh berikut.
file index.html :
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<H1 id=”judul”> Judul </H1>
<H2 id=”menu”> Menu </H2>
<p id=”isi”> Isi halaman </p>
<div>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<H1 id=”judul”> Judul </H1>
<H2 id=”menu”> Menu </H2>
<p id=”isi”> Isi halaman </p>
<div>
</body>
</html>
file style.css :
#judul {
Color : red ;
}
#menu {
Color : yellow ;
}
#isi {
Color : green ;
}
Color : red ;
}
#menu {
Color : yellow ;
}
#isi {
Color : green ;
}
Dari kode CSS diatas bertujuan untuk memberikan warna pada masing-masing id yang telah ditentukan yaitu, pada id (judul) diberi warna merah dan id(menu) diberi warna kuning dan id (isi) diberi warna Hijau. Seperti gambar berikut :
4. Class selector, sama halnya dengan id selector. Class selector juga harus diberikan nama classnya didalam elemen HTML, dengan menuliskan class=”header”.
perbedaanya adalah class selector dapat digunakan untuk pemberian nama pada beberapa elemen HTML. Cara pemanggilannya harus diawali dengan tanda ‘.(titik)’ lebih jelasnya perhatikan contoh berikut :
file index.html:
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<H1 class=”text”> Judul </H1>
<H2 class=”text”> Menu </H2>
<p class=”text”> Isi halaman </p>
<div>
</body>
</html>
<html>
<head>
<title> Belajar CSS </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<H1 class=”text”> Judul </H1>
<H2 class=”text”> Menu </H2>
<p class=”text”> Isi halaman </p>
<div>
</body>
</html>
file style.css :
.text {
Color : red ;
}
Color : red ;
}
Kode CSS diatas bernaksud untuk memberikan warna merah pada elemen HTML yang memiliki atribut class. seperti gambar berikut :
Jika teman-teman ingin tahu lebih banyak lagi tentang bahasa pemrograman CSS ini. Kunjungi artikel tutorial Part 3 yang membahas tentang tutorial font styling/ gaya font pada bahasa pemrograman CSS
0 Response to "Mengenal Jenis Selector pada bahasa pemrograman CSS"
Post a Comment