CSS selector adalah bagian terpenting dari CSS. Selector
mendefinisikan elemen – elemen HTML mana saja yang akan dimanipulasi
menggunakan kode CSS.
Ada
4 (empat) macam selector :
1.
Tag / elemen
Semua tag /elemen HTML yang berada pada bagian
<body> merupakan selector.
Contoh :
|
<html>
<head>
<title> Selector -
Tag</title>
<style type="text/css">
h3{text-decoration: underline;
text-align:center}
</style>
</head>
<body>
<h3> Tag heading ini dimodifikasi
menggunakan CSS</h3>
</body>
</html>
|
2.
Selector bebas
Seorang web design dapat membuat tag sendiri yang
difungsikan sebagai CSS.
Contoh :
|
<html>
<head>
<title> Selector - Bebas
</title>
<style type="text/css">
gbawah{text-decoration: underline;}
</style>
</head>
<body>
<gbawah> Efect Garis Bawah dengan
Selector Bebas </gbawah>
</body>
</html>
|
3.
Class
Pada pendeklarasiannya, penulisan selector
berbentuk class diawali dengan tanda titik (.), dan pada file HTML yang
memanggilnya, ditambahkan atribut class.
Contoh :
|
<html>
<head>
<title> Selector - Class
</title>
<style type="text/css">
.modifikasi {font-family:Verdana,
Arial, Helvetica, sans-serif; font-size:16px; text-align:center}
</style>
</head>
<body>
<p
class="modifikasi">Memodifikasi tag <p> menggunakan selector class</p>
</body>
</html>
|
4.
ID
Pada pendeklarasiannya, penulisan selector
berbentuk ID diawali dengan tanda pagar (#), dapat digunakan untuk
mendefinisikan header, content, dan desain dalam desain web karena
didefinisikan dengan ID berbeda.
Contoh :
|
<html>
<head>
<title> Selector - ID
</title>
<style
type="text/css">
#judul {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-style:italic
}
</style>
</head>
<body>
<p
id="judul">Menggunakan ID Selector untuk memodifikasi
tampilan</p>
</body>
</html>
|
0 comments:
Post a Comment