3 Selector
Selector adalah kata yang digunakan untuk memilih elemen HTML dan akan dimodifikasi dengan script CSS.
Secara umum ada tiga macam Selector dalam penulisan CSS, Yaitu :
Berikut adalah penjelasan masing-masing Selector ;
adalah Selector dengan menyebutkan secara langsung nama tag HTML yang akan di atur oleh CSS. Selector tag tidak perlu menggunakan simbol <>, kita cukup menulsikan nama tag nya saja.
Berikut adalah contoh script yang terdapat selector tag dengan nama file selector tag.html
<html>
<head>
<style type="text/css">
h2{
color: red;
}
p{
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Cerita Rakyat</h2>
<p>Isi Cerita sebagai berikut</p>
</body>
</head>
</html>
Skrip diatas menggunakan selector tag pada tag p dan tag h2 (secara langsung) tanpa simbol tag pembuka dan tag penutup <>.
Pada browser akan ditampilkan sebagai berikut :
yaitu selector yang menyebutkan nama class dari tag yang ingin dimodifikasi dengan CSS. Dalam penyebutan nama class harus disertai tanda titik (.) sebelum nama class.
Berikut adalah contoh script selector class dengan nama file selector class.html
<html>
<head>
<style type="text/css">
h2{
color:red;
}
.biru{
color:blue;
}
</style>
</head>
<h2>Judul Cerita</h2>
<p>Isi Cerita Pertama</p>
<p class="biru">Isi Artikel kedua</p>
<p class="biru">Isi Artikel kedtiga</p>
</body>
</html>
<!-- nama class disertai titik -->
Pada browser akan ditampilkan sebagai berikut :
Selector id yaitu penulisan selector dengan nama id dari elemen HTML. Penulisan nama id disertai dengan tanda hastag (#) sebelum nama id. Satu nama idhnaya bisa digunakan oleh satu elemen HTML. Selector id adalah penulisan selector yang paling umum digunakan dibandingkan dengan selector tag dan selector class.
Perhatikan contoh script selector id dengan nama file selector id.html sebagai berikut :
<html>
<head>
<style type="text/css">
h2{
color: red;
}
.biru{
color: blue;
}
#tebal{
font-weight: bold;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Judul Cerita</h2>
<p>Isi Artikel Pertama</p>
<p class="biru">Isi Artikel Kedua</p>
<p class="biru" id="tebal">Isi Artikel Ketiga</p>
</body>
</html>
<!-- nama id disertai # -->
Pada browser akan ditampilkan sebagai berikut :
0 Komentar