Assalamu'alaikum warohmatulloh wabarokaatuh sobat sekarang kita belajar tentang jenis-jenis selector yang sering banyak kita temui di code Css ini bekas latihan saya dari 3 master mudah-mudahan bisa di pahami langsung saja
Bagaimana Cara nya Membuat Selector
pertama tulis saja Code -code Contoh berikut ini di notepad dan lihat hasilnya
contoh 1) Element selector
p {}
artinya: semua elemen p akan dikenai aturan CSS
<html>
<head>
<style type="text/css" media="screen">
p {color:white;background:blue;padding:5px;}
</style>
<head>
<body>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</body>
</html>
contoh kedua
<html>
<head>
<style type="text/css" media="screen">
h1, p {color:white;background:blue;padding:5px;}
</style>
<head>
<body>
<h1>Contoh (h1)</h1>
<p>Contoh Paragraph</p>
<p>contoh Paragraph</p>
</body>
</html>
contoh ke 3
<html>
<head>
<style type="text/css" media="screen">
body{ FONT-FAMILY: Geneva, Arial;FONT-SIZE: 20px;
color: green; BACKGROUND-COLOR: silver;}
</style>
</head>
<body>seluruh body dan font terkena aturan css </BODY>
</html>
contoh 2) Class selector
.paragraf {}
semua elemen dengan class “paragraf” akan dikenai aturan CSS.
<html>
<head>
<style type="text/css" media="screen">
.paragraf { color:white;background:blue;padding:5px; }
</style>
</head>
<body>
<h2 class="paragraf">Class Heading 2 </h2> <p class="paragraf"> Class Paragraf</p>
</body>
</html>
contoh kedua
<html>
<head>
<style type="text/css" media="screen">
.paragraf { color:silver;background:black }
</style>
</head>
<body>
<h1 class="paragraf">Class Heading 1 </h2> <p class="paragraf"> Class Paragraf</p>
</body>
</html>
Contoh 3) ID selector
#body {}
semua elemen dengan id “body” akan dikenai aturan CSS.
<html>
<head>
<style type="text/css" media="screen">
#body {background:silver}
</style>
</head>
<body id="body"> Menggunakan ID Selector (body berwarna silver )
</body>
</html>
contoh kedua
<html>
<head>
<style type="text/css" media="screen">
#body { FONT-SIZE: 20px; TEXT-DECORATION: underline; COLOR: blue; FONT-FAMILY:Comic Sans MS; }
</style>
</head>
<body id="body"> Menggunakan ID Selector
</body>
</html>
pengetahuan tentang elemen elemen-selektor
selector yang bisa ditulis secara langsung dengan menghilangkan tanda <…>
semisal <p> cukup anda tulis p saja, ada selektor lain yang tidak kalah pentingnya yaitu selector ID dan selektor Class.
Coba anda bayangkan jika anda mau merubah tampilan tag <p> dan tampilannya berlainan semisal untuk font ,
anda bisa menentukan tag <p> di CSS tetapi jika pada penulisannya p {font-family:arial} maka semua tag <p> akan dirubah menjadi font Arial semua.
Bagaimana jika salah satu pada Tag <p> anda menginginkan Font nya dirubah menjadi Verdana, untuk itu anda membutuhkan Selector ID atau Class.
Selektor ID
Fungsi dari selektor Id adalah untuk memberi tanda supaya pada tag HTML yang sudah diberi ID bisa di beri format lain.
Sebagai contoh :
Penulisan pada Tag HTML
<p id= “toc”> disini anda menulis artikel </p>
<p> Tulisan artikel anda yang lain</p>
Disini anda memberi Selektor ID dengan nama toc, dan pada CSS anda bisa memberi code sebagai berikut ini :
P (font-family:verdana}
#toc{ font-family:arial}
Pada selector ID penulisan ID ditandai menggunakan tanda ‘ # ’
Yang berarti artikel pada p yang sudah diberi ID akan dibaca font menjadi arial sedangkan sedangkan p yang lain dibaca menggunakan font verdana.
Selektor Class
Untuk selektor Class fungsinya sama dengan selektor ID namun pada selektor Class anda bisa memberi lebih dari satu selector class tetapi pada selektor ID anda tidak bisa memberi nama ID yang sama.
Contoh penulisan Selektor Class :
Pada Tag HTML
<p class=”media”> artikel anda disini</p>
Pada CSS :
.media {font-family:calibri}
Pada selektor Class penulisan Class ditandai menggunakan tanda ‘ . ’
Kesimpulannya adalah :
Pada kedua selektor ini fungsinya sama, namun yang membedakan adalah pada selektor ID
tidak bisa membuat lebih dari satu dengan kata lain selector ID digunakan untuk yang spesifik.
Sedangkan selektor class anda bisa menaruh Selektor Class pada Tag HTML lebih dari satu
refrensi
Master Hafid Mukhlasin
Master Rudydevianto
Bengkel internet
Alhamdulillah Catatan sederhana Tentang Jenis-jenis Selector Code Css telah selesai mohon maaf jika ada kesalahan wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment